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Отавтора 


После выхода в свет моих книг «Сам себе \еб-мастер» (2001) и «Сам себе \ме- 
дизайнер» (2002) многочисленные читатели часто спрашивали меня о том, как 
написать тот или иной сценарий на языке ]ауаЗсг!р{ для поддержки своей веб- 
страницы. Сначала я пытался оперативно отвечать на все вопросы, но вскоре вы- 
нужден был оставить это занятие — просто не успевал. Вместе с тем появлением 
этой книги я обязан вам, уважаемые читатели. Понятно, что, освоив НТМГ, начи- 
нающие веб-дизайнеры сначала ищут по всему свету образцы недостающих им 
сценариев, а затем — рецепты их создания. Рано или поздно они ощущают необ- 
ходимость глубже познать язык сценариев, чтобы не гоняться за рецептами, а са- 
мим их создавать. Кроме того, на разработку веб-сайтов можно взглянуть не толь- 
ко с традиционной точки зрения НТМГ, но и с позиций языка сценариев, что еще 
более увлекательно. Как и НТМЕГ, язык Лауа$сир( с успехом претендует на роль 
народного языка общения с компьютером. Он очень популярен, его легко изучать 
не искушенным в программировании новичкам. Тем не менее он достаточно вы- 
разителен при создании вполне серьезных и полезных приложений как для Веб, 
так и для локальных компьютеров. 


Хотя Лауазсире прост для усвоения и практического использования, полное его 
описание занимает более 1000 страниц. Я понимаю, что далеко не каждый, даже 
весьма заинтересованный этой темой, отважится на чтение такого фолианта, осо- 
бенно если ему предстоит все начинать с нуля. Эта книга — не справочник, а прак- 
тическое руководство для самостоятельного изучения ]ЛауаЗсири, не требующее 
от читателя предварительной подготовки в области программирования. Я хотел 
сделать ее небольшой, понятной и полезной. В ней содержится масса сведений, 
рекомендаций и даже рецептов, которые вам могут потребоваться на первых по- 
рах создания веб-сайтов и локальных приложений. Однако главная цель книги — 
помочь научиться программировать. Если вы никогда ранее не занимались про- 
граммированием, то эта книга даст вам ключ к освоению не только Лауа$сг!ре, но 
и любого другого языка программирования. В частности, от ЛауаЗсире вы сможе- 
те довольно легко перейти к изучению С++, ]ауа и др. Вообще говоря, стоит толь- 
ко освоить один язык, и вам открыты двери клюбому другому. Если вы начинаете 
с Ллауа$сирь то это очень хороший выбор. 


На каком-то этапе проникновения в мир программирования на Лауа5сире вам, 
вероятно, потребуются дополнительные сведения. Осилив предлагаемую книгу, 
вы уже будете готовы к их восприятию. Вот тут-то вам и понадобятся справочни- 
ки с детальной и полной информацией, которые найдутся в книжных магазинах, 
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на полках библиотек или в Интернете. В настоящее время наилучшим, на мой 
взгляд, справочником по ЛауаЗсире является весьма объемная книга Д. Гудмана 
«Лауа5стре. Библия для пользователя». 


Материал предлагаемой книги поддерживается моим сайтом, расположенным по 
адресу \\\.аАпига1.ги/-4ипаеу. По мере сил и возможностей я периодически 0б- 
новляю его. Свои отзывы, вопросы и пожелания вы можете оставить в гостевой 
книге. Так что добро пожаловать! 


Благодарность 


Я искренне благодарю свою жену Валентину за понимание и внимательное отно- 
шение ко мне в период работы над книгой. 


От издательства 


Ваши замечания, предложения, вопросы отправляйте по адресу электронной по- 
чты сошр@рИег.сот (издательство «Питер», компьютерная редакция). 


Мы будем рады узнать ваше мнение! 


На веб-сайте издательства Вр://\м\\.рКег.сот вы найдете подробную информа- 
цию о наших книгах. 


Введение 


Язык программирования, как и любой другой язык (естественный, например), 
предназначен для коммуникации, то есть связи между говорящим и слушающим. 
В программировании говорящим является программист, а слушателем — интер- 
претатор языка, некоторая компьютерная программа, понимающая этотязык и вы- 
полняющая действия в соответствии с тем, что она поняла. 


Было время, когда считалось, что для облегчения общения с компьютером необ- 
ходимо создать язык, достаточно близкий к естественному. Эта идея в конечном 
счете не выдержала испытаний временем, хотя и породила несколько прекрас- 
ных языков программирования. Часто бывает, что побочные эффекты некоей де- 
ятельности превосходят ожидания. Мы испытываем трудности общения и на ес- 
тественном языке; что уж говорить о специализированных языках, тем более 
о языках общения с компьютером... Проблема решается на удивление просто. Глав- 
ное здесь — понять корень или причину проблемы. Вся сложность заключается 
не в языке, ав культуре или способе его употребления. В конце концов, язык пред- 
ставляет собой лишь нормативную базу, алюди используют ее лишь так и в той 
мере, как смогли или как им показалось достаточным для своих житейских нужд. 
Когда люди, сами того не желая, размывают небрежной речью нормативную базу 
языка, они разрушают систему коммуникации не только между собой, но и между 
последующими поколениями. А как соблазнительно использовать слэнг и жар- 
гон! При этом возникает иллюзия причастности к особой, исключительной груп- 
пе, некоей профессиональной касте. Кажется, что это выделяет нас из толпы. По- 
нятно, что для становления личности необходимо выделиться из среды, но не 
настолько, чтобы выпасть на обочину магистрали, по которой движется все наше 
общество. На обочине вас никто не заметит, пролетая мимо, а вам самим останет- 
ся только копошиться в грязи, чтобы потом рассказать кому-нибудь о перипетиях 
вашего лихого путешествия по жизни. Но соблазны на то нам и даны, чтобы мы 
могли показать свою способность им противостоять. 


Любой язык, на котором хотя бы кто-нибудь говорит, — живой. Практика исполь- 
зования языка стимулирует развитие его нормативной базы и тем самым поддер- 
живает его существование. Владимир Даль не описывал нормы русского языка, 
а фиксировал словоупотребление, поэтому его словарь и называется словарем «жи- 
вого великорусского языка». Что касается искусственных языков, то есть языков 
программирования, то трудности их освоения новичками обусловлены, главным 
образом, недостатком практики программирования. Стандартный (формальный) 
способ описания языка хорош для тех, кто уже изучал любой язык программиро- 
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вания. Для новичков же стандартный, тем более формальный способ изложения 
правил языка является, мягко говоря, неприемлемым. Мы постигаем нечто ина- 
че, чем излагаем уже освоенное. Эта хорошо известная истина, к сожалению, по- 
чему-то часто забывается и учениками, и преподавателями. Однако авторы почти 
всех руководств по языку, снискавших широкое признание и добившихся успеха, 
следовали этому основному принципу. 


Давайте для пробы пера напишем и выполним хотя бы элементарную, но все же 

полноценную программу на Лауа$спрё, чтобы убедиться в реальности нашей за- 

теи изучить программирование. Откроем простой текстовый редактор, например 

Блокнот (Мо{ераа) УМпдо\з (рис. В.Г), и введем с клавиатуры следующий текст: 
У сг!ре.есво ( "Привет!" ) 


?зйяй Правка Поиск Справка 


«Зсир+.еспо("прМВет?"); 


Рис. В .[. Код программы в окне текстового редактора 


Мы написали элементарную программу на языке Лауа$ сир, состоящую из одной 
строки. Сохраним эту программу в файле под именем, например, ргоБа.}з. Имя 
файла может быть произвольным, а вот расширение ]5 указывает, что он содер- 
жит выражения, написанные на языке Лауа$ стр. Чтобы сохранить файл, выпол- 
ните команду меню Файл } Сохранить как. В открывшемся диалоговом окне из рас- 
крывающегося списка Тип файла выберите Все файлы (*.*), а в поле Имя файла 
введите с клавиатуры имя файла с расширением }°, например ргоБа.]$ (рис. В.2). 
В заключение щелкните на кнопке Сохранить. 


Сохранение $ 


Пако’ Мои документы |“ 1“ 2 5 2 


_— | Мои рисунки 
© еайоит 
Цпримеры, пт 
1’ УамаСКрниг.4ос 


Сояраить 


Имя аа  |ритба 5 
Тий фз 8 ;|Все Файлы (".*) т] | Отмена | 


Рис. В.2. Диалоговое окно сохранения файла 
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Итак, наша программа написана и сохранена в файле. Чтобы ее выполнить, в Про- 
воднике У!1тао\$ дважды щелкните на имени файла ргоБа.}з. В результате на эк- 
ране появится диалоговое окно со словом «Привет» и кнопкой ОК (рис. В.З). 
Щелчок на этой кнопке закроет окно. Так работает наша программа. 


Сервер сценариев \Ипао\м5_ №4 


!: Привет!- 


Рис. В.3. Диалоговое окно с сообщением, созданное программой 


Теперь немного модифицируем нашу программу. Откроем Блокнот и напишем 
в нем следующие строки: 

<> 

<$спре> 

аеч("Привет") 

< /5ст1рЕ> 

</вет[> 
Сохраним эту программу в файле с именем ргофа.№+т. Если мы ее выполним, то 
в результате откроется окно веб-браузера, а на его фоне — диалоговое окно со сло- 
вом «Привет! и кнопкой ОК (рис. В./4). 


айн Приказ” Них- Избралийе Сы 2 р 1 м | 
сы п В Е 


О ет "остановить Обновить — Домой _ Поиск _ Избранное 


ТЕБЕ т Гу ие боновения г т эре очен о = 


Рис. В.4. Диалоговое окно с сообщением на фоне браузера !щете! Ехрогег 
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Итак, эффекты выполнения рассмотренных выше двух программ почти одинако- 
вы: обе программы выводят на экран диалоговое окно с сообщением. Различие 
состоит в том, что в первом случае диалоговое окно с сообщением появляется само 
по себе, а во втором — на фоне окна браузера. Дело в том, что эти почти одинако- 
вые программы исполняются различными интерпретаторами языка. В первом 
случае это сервер сценариев УМт4о\з, называемый УМшао\з ЗсирИп» Ноз, а во 
втором — веб-браузер. Вообще говоря, редакции языка Лауабсирй, понимаемые 
этими интерпретаторами, несколько различаются, но между ними много обще- 
го— в смысле как синтаксиса, таки принципов построения. Поэтому можно гово- 
рить о различных редакциях одного и того же языка. 


Таким образом, мы столкнулись с тем, что различные исполнительные системы 
(интерпретаторы) воспринимают различные редакции одного и того же языка. 
Это происходит из-за того, что только благодаря интерпретаторам можно гово- 
рить о языке как о чем-то реальном. Представьте себе следующую ситуацию. До- 
пустим, мы сами придумали некий язык программирования. Чтобы на нем дей- 
ствительно можно было писать программы, необходимо создать исполнительную 
систему — интерпретатор этого языка. Интерпретатор сам является программой, 
написанной на другом языке программирования и, возможно, другими людьми. 
Он может воспринимать декларированный нами язык в полной мере или только 
частично. А может случиться и так, что некоторые элементы языка интерпрета- 
тор будет воспринимать по-своему, не так, как это изначально предполагалось ав- 
торами. Поэтому появляются различные редакции языка, каждая для своего ин- 
терпретатора. Например, редакции Лауаз ср, понимаемые М!сгозой Пиегпе 
Ехр]огег и браузерами Ме{саре, значительно отличаются друг от друга. С другой 
стороны, интерпретаторы усовершенствуются, появляются их новые версии. Те 
фрагменты языка, которые не воспринимались старыми версиями, становятся до- 
ступными в новых. Иначе говоря, интерпретаторы стремятся соответствовать не- 
которому стандартному подмножеству языка. Язык также может развиваться 
с учетом практики его использования и проблем, возникающих при разработке 
интерпретаторов. Постепенно формируется стандарт языка, который должен под- 
держиваться интерпретаторами различных производителей. 


На момент выхода в свет этой книги современной являлась версия 1.5 ЛТауа$спре. 
Все рассмотренные в книге конструкции языка и примеры сценариев работают 
в браузере Мисгозой Пциегпеё Ехр]огег 6.0 для УИт4о\з; многие из них подходят 
и для Пиетше Ехр|огег 4+ для \Мш9до\5, но не все, — возможно, они будут коррек- 
тно выполняться в [щ{егпе Ехрогег 5 для Маси\тозВ. Некоторые описанные в книге 
средства не будут работать в М№есаре Ма\ваог версии 4 и старше. Средства, вос- 
принимаемые только браузерами, отличными от Пиегие Ехрогег для УМш@ао\$, 
в этой книге не рассматриваются вообще. Если не оговаривается особо, то описы- 
ваемые в книге средства применимы для Пиегпе{ Ехр]огег 4 для \Мт4о\$ и стар- 
ше, хотя некоторые из них могут работать и в более ранних версиях. Если у вас 
установлен Пиегпе{ Ехрогег для \Мш4о\$ версии 5.5 и старше, то все сценарии, 
приведенные в книге, будут работать. Из-за ограниченного объема книги в ней 
отражены лишь основные возможности Лауазсире, кое-что пришлось оставить без 
внимания. Если вы чего-то не найдете, то обращайтесь к другим, более специали- 
зированным или более объемным книгам. 
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Глава | посвящена основным элементам собственно языка/Лауа$ сп!ри. Глава 2 зна- 
комит читателя с основными понятиями и важнейшими объектами, используе- 
мыми при создании сценариев, которые выполняются браузером. По существу, 
это введение в мир разработки сценариев. Обзор объектной модели браузера и до- 
кумента приводится в главе 3. Материал этой главы можно использовать в каче- 
стве краткого справочника и пропустить при первом чтении. Он понадобится для 
получения ориентации в пространстве объектов. Примеры сценариев, решающих 
конкретные практические задачи, представлены в главе 4. Хотя примеры присут- 
ствуют во всех главах, в этой главе они иллюстрируют комплексное применение 
различных средств Гауа5сирЕ и приближены ктиповым задачам веб-дизайна. Гла- 
ва 5 посвящена работе с файловой системой компьютера и реестром УМт@ао\з с 
помощью программ на ЛауаЗспре. Ее можно читать отдельно, поскольку материал 
не связан с предыдущими главами. В приложении приведены руководство и спра- 
вочник по НТМГ. 


Изучение материала книги может быть успешным только при активном отноше- 
нии читателя. Хотя описываемые в книге программы вполне работоспособны, их 
коды, скорее всего, несовершенны и могут быть улучшены, модифицированы для 
решения других задач либо интегрированы с другими программами в каком-то 
сложном программном проекте. Если вы попробуете что-либо с ними сделать, то 
многому научитесь и многое поймете. Это — магистральный путь познания про- 
граммирования. Итак, мы начинаем. 


Глава 1. Основы Чауа$ сир+ 


1.1. Где писать программы и как их запускать 


В этой главе мы рассмотрим основы языка Лауа$ сир": важнейшие понятия и син- 
таксис (правила построения выражений). Приводимые примеры желательно са- 
мостоятельно выполнить на компьютере. Это можно сделать по-разному, но по 
крайней мере на первом этапе я рекомендую воспользоваться самым простым и до- 
ступным способом: в качестве интерпретатора (исполнительной системы) про- 
грамм на Лауа5сирЕ возьмите веб-браузер. Я работал с Пиегпе Ехрогег 6.0. Боль- 
шинство приведенных в книге примеров работают и в версии 5.0 этого браузера. 
В качестве редактора ваших программ выберите какой-нибудь простой тексто- 
вый редактор, например Блокнот \Мш4о\з. Откройте текстовый редактор и со- 
здайте в нем заготовку файла, который вы будете потом редактировать, вводя 
экспериментальные выражения или даже целые программы. А именно введите 
в рабочее поле редактора следующий текст: 


<НТМЕ> 
<НЕАБ><ТПЬЕ>прММеры</ТТЕЕ></НЕАО> 
<5СЕРТ> 


</ЗСВТРТ> 
</ЧТМЕ> 

По существу, это НТМГ-документ, определяющий пустую веб-страницу. Сохра- 
ните этот файл на диске, например под именем пример.Вит. Расширение имени 
файла должно быть № или №11, поскольку мы хотим, чтобы он исполнялся в веб- 
браузере. В этом файле мы написали теги языка НТМГ. Выражения на языке 
Тауазсг!р{ следует записывать между тегами <ЭСКРТ> и </ЗСВТРТ>. При изучении 
этой главы записывайте в каждой строке не более одного выражения на языке 
ТауабсирЕ. Заканчивайте строку нажатием на клавишу Ещег, чтобы перейти к но- 
вой строке. Ниже приведен пример программы: 


<НТМГ> 

<НЕАО><Т1Т1Е>Примеры< /ТТТЬЕ ></НЕАР> 
<5СВТРТ> 

х=5 

у=х+3 

а1екЕ (у) 


</ЗСВТРТ> 
</нНтмь> 
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При выполнении учебных примеров обычно требуется вывести на экран оконча- 
тельные или промежуточные данные. Для этого можно использовать метод айе “О, 
указав в круглых скобках то, что требуется вывести на экран. В приведенном выше 
примере метод а!ег((у) выведет на экран диалоговое окно, в котором отобразит 
значение переменной у (в данном случае — число 8). Если не вставлять строку 
а1ет((у), то программа выполняется без отображения результата. Если вы хотите 
выводить результаты вычислений не вдиалоговом окне, а непосредственно в окне 
веб-браузера, то вместо ае (у) напишите следующее выражение: 
ФосиметЕ. мг Ее [т (у) 


Чтобы открыть файл (в нашем случае это примеры.Вит) в веб-браузере и выпол- 
нить содержащуюся в нем программу, достаточно просто дважды щелкнуть левой 
кнопкой мыши на нем вокне Проводн ика\\/тдо\$. Если теперь потребуется открыть 
этот файл в окне текстового редактора, то щелкните правой кнопкой мыши где-ни- 
будь на свободном пространстве в окне браузера и в контекстном меню выберите 
команду Просмотр в виде НГМГЕ, Можно также воспользоваться и командой меню Вид > 

В виде НТМЕ. В результате откроется окно текстового редактора с текстом вашей про- 
граммы (рис. 1.1). Внесите необходимые изменения и сохраните их на диске (Файл > 

Сохранить). Чтобывеб-браузерсмоготобразитьизмененный файл, выполните коман- 
ду Вид > Обновить (рис. 1.2). Таким образом, переходя от текстового редактора к брау- 
зеру и обратно, можно разрабатывать и отлаживать свои программы. 


$ Примеры > Месгозой 1пфеноей Ехрю 20 о 
1 л .\ \ % > 
ках. Э а 7] д 
Назад Остановить Овмдаить Помой И 
баре |© | СЛМу меб\ту\пр” Меры мт "| С? Переход | Ссылки 
Щ примеры Шт - Бжктт. 1 * ь РЯ [С] х 8 
ны 
| «НтмЕ> ИЕ = 
| «НЕЙЯБ><ЕУТРЕЕ >Примеры</ #1 ТЕ></НЕЯО» 
| <$СНРТ> 
| Х=5 
| у=хХ +3 
| [апег(у) 
| <узсниРТ> 
т 
| 
Л : 
поаитнианимииттиие = = — 
=, Сато 2] мой козельютер Се р > 


Рис. 1.1. Текстовый редактор Блокнот с программой на фоне браузера !тщете{ Ехрогег 


Создавать программы на ЛауаЗ сир можно и с помощью программ, специально 
предназначенных для разработки веб-сайтов, — например Мисгозой Егоп"Разе или 
Масгтоте Ча Отеатуеауег (рис. 1.3). Однако здесь мы не будем рассматривать эти 
средства. 
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т«Л Е р!ог$ 


| *Щ Примеры - М!сго5ой Ш 


еБ\ту\примеры,Ь1т 


1.2. Результат выполнения программы из файла пример.Нт 


Рис. 


№") * Отеав 
т у 


Книге Чауа$сир/примеры В 


«агпкПримеры ( 


ФТ 2 Е 


НТМЕ> 
<НЕАБ><ТТЬЕ>прММеры<АПТЕХ/НЕАО> | 


Ра ЧЕТ 


зе 


примеры Н{т + Инет 


У 


<НЕАО><ТИТЕ>ирММеры</Т1ТЬЕ></НЕАО> 


ет 


1 <интмь> 
27 ЗИИ: 


Рис. 1.3. Окно Огеатмеауег 4.0 — программы для разработки веб-сайтов 


Наконец, я предлагаю вам быстро создать свой собственный редактор программ. 
Для этого следует написать небольшой НТМГ-код и сохранить его на диске 
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в файле с расширением „Вет или „Вит. Этот файл можно открыть в браузере как 
обычную веб-страницу. Вот код предлагаемого редактора: 


<НТМЕ> 

<НЗ>Редактор кодов Лауа$сг!р</НЗ> 

Код:<Ы> 

<ТЕХТАКЕА 14="тусоде" ВОМЗ=0 СОТ5=60></ТЕХТАВЕА> 
<р>Результат:<Ы> 

<ТЕХТАВЕА 19="пуге2и16" В0М53=3 С0.5=60></ТЕХТАВЕА> 


<Р> 

<ВОТТОМ опс11ск="аосимете .а11.тугето1е .уа1ае=еуа1 (тусоде.уа1ае) "> 
ВыполнитЬ< /ВИТТОМ> 

<ВОТТОМ опс11ск="Чаосошере .а11 .тусо@е .уа1ае=''; 
Чосомепе.а11.тмуге7то16 .уа1ае=''"> 

О4НСТНТЬ</ВОТТОМ> 

<Р> 


<! Комментарий > 

Введите выражения в верхнее поле. 

Выражения разделяются точкой с запятой. 

Можно также писать каждое выражение в отдельной строке. 

Чтобы закончить одну строку и перейти к другой, нажмите клавишу Еп{ег. 
</НТМЕ> 


3 С:АМОИ документыЧесМог Мт - Мисгозой |щегпе! Ехроге! : 
| Файй Правка Вид Избранное Сереие Справка 


Результат: 


Введите выражения в верхнее поле. Выражения разделяются точкой с запятой. 
Можно также писать каждое выражение в отдельной строке. Чтобы закончить 
1 одну строку и перейти к другой, нажмите клавишу Епег. >| 
* 


бавдис чита аи аи рые март рт ео твоих 4 


[Е Готово Во 8] Мой компьютер 


Рис. 1.4. Редактор программ амазсйрь, сделанный с помощью НТМЕ 
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В веб-браузере этот НТМТ-код выведет две текстовых области: одна служит для 
. ввода выражений на языке ЛауаЗст!рф, а другая — для отображения результатов 
этого кода. Кроме текстовых областей создаются две кнопки: одна для выполне- 
ния введенного кода и отображения результатов, а вторая — для очистки тексто- 
вых областей. В поле результатов выводится значение, возвращаемое последним 
выражением введенного кода. Обратите внимание, что в поле для кода следует 
вводить только выражения на языке ЛауаЗспрь, но не теги НТМЕ. 


Здесь мы не будем разбирать, как устроен предлагаемый код редактора. Отметим 
лишь, что в его основе лежат простые сценарии на языке ЛауаЗсире, выполняю- 
щие роль обработчиков события, например щелчка кнопкой мыши (опсПск). На 
рис. 14 показано, как выглядит наш редактор в окне браузера Пиегпе{ Ехр]огег. 


СОВЕТ 


Если вы решитесь использовать самодельный редактор, то при возникновении ошибок 
в ваших программах (сообщение об ошибке отображается в статусной строке веб-браузе- 
ра) выполните команду меню браузера Вид > Обновить. 


1.2. Ввод и вывод данных 


В Лауа5сире предусмотрены довольно скудные средства для ввода и вывода дан- 
ных. Это вполне оправданно, поскольку ЛауаЗсирЕ создавался в первую очередь 
как язык сценариев для веб-страниц. Основой веб-страниц является код, напи- 
санный наязыке НТМГ, который специально рассчитан на форматирование ин- 
формации и создание пользовательского интерфейса. Поскольку сценарии на 
ТауазсирЕ хорошо интегрируются с НТМТ-кодом, постольку для ввода и вывода 
данных вполне подойдут средства НТМГ, Если вы пишете программу на/]ауаЗспрь, 
которая будет выполняться веб-браузером Пиегпе Ехрогег, то можете восполь- 
зоваться тремя стандартными методами для ввода и вывода данных: ае\О,. 
рготрО и сопйгтО. Рассмотрим эти методы браузера подробнее. 


1.2.1. мег 


Данный метод позволяет выводить диалоговое окно с заданным сообщением 
и кнопкой ОК. Синтаксис соответствующего выражения имеет следующий вид: 
а1еГгТ("сообщение) 


Если ваше сообщение конкретно, то есть представляет собой вполне определен- 
ный набор символов, то его необходимо заключить в двойные или одинарные ка- 
вычки. Например, аег! ("Привет кем!") (рис. 1.5). Вообще говоря, сообщение пред- 
ставляет собой данные любого типа: последовательность символов, заключенную 


в кавычки, число (в кавычках или без них), переменную или выражение. 


Диалоговое окно, выведенное на экран методом аег((), можно убрать, щелкнув на 
кнопке ОК. До тех пор пока вы не сделаете этого, переход к ранее открытым окнам 
невозможен. Окна, обладающие свойством останавливать все последующие дей- 
ствия пользователя и программ, называются модальными. Таким образом, окно, 
создаваемое посредством аепО, является модальным. 
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. м : Прибег ьсеы 


Рис. 1.5. Диалоговое окно, созданное методом а!ег1("Привет всем!") 


Выше мы уже говорили, что метод а1ег+()можно использовать для вывода проме- 
жуточных и окончательных результатов программ при их отладке. При этом вы 
можете вывести результат вычисления какого-либо выражения и приостановить даль- 
нейшее выполнение работы программы до тех пор, пока не щелкнете на кнопке ОК. 


1.2.2. сопйгт 


Метод сопЙгт позволяет вывести диалоговое окно с сообщением и двумя кнопка- 
ми — ОКи Отмена (Сапсе!]). В отличие от метода а[ет" этот метод возвращает логи- 
ческую величину, значение которой зависит от того, на какой из двух кнопок щелк- 
нул пользователь. Если он щелкнул на кнопке ОК, то возвращается значение {гие 
(истина, да); еслиже он щелкнул накнопке Отмена, то возвращается значение #15е 
(ложь, нет). Возвращаемое значение можно обработать в программе и, следова- 
тельно, создать эффект интерактивности, то есть диалогового взаимодействия 
программы с пользователем. Синтаксис применения метода сопЯгт имеет следу- 
ющий ВИД: 


сопЁтгт (сообщение) 


Если ваше сообщение конкретно, то есть представляет собой вполне определен- 
ный набор символов, то его необходимо заключить в кавычки, двойные или оди- 
нарные. Например, сопйнт("ВЫ действительно хотите завершить работу?") (рис. 1.6). 
Вообще говоря, сообщение представляет собой данные любого типа: последова- 
тельность символов, заключенную в кавычки, число (в кавычках или без них), 
переменную или выражение. Если вы еще не знаете, что такое переменная и вы- 
ражение, то вскоре восполните этот пробел. 


1 Мсгозой метеехр!о!е! а 


> : 
: Л Выдействительно хотите заваршить работу?;::; 


Ем Е Отмена 


Рис. 1.6. Диалоговое окно, созданное методом сопйгт 


Диалоговое окно, выведенное на экран методом сопйгит(), можно убрать щелчком 
на любой из двух кнопок — ОК или Отмена. До тех пор пока вы не сделаете этого, 
переход к ранее открытым окнам невозможен. Окна, обладающие свойством оста- 
навливать все последующие действия пользователя и программ, называются мо- 
дальными. Таким образом, окно, создаваемое посредством сопйгтО, является 
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модальным. Если пользователь щелкнет на кнопке ОК, то метод вернет логиче- 
ское значение {гие (истина, да), аесли он щелкнет на кнопке Отмена, то возвраща- 
ется логическое значение #Бе (ложь, нет). Возвращаемое значение можно затем 
обработать в программе и, следовательно, создать эффект интерактивности, то - 
есть диалогового взаимодействия программы с пользователем. 


1.2.3. рготру 


Метод рготр\ позволяет вывести на экран диалоговое окно с сообщением, атакже 
с текстовым полем, в которое пользователь может ввести данные (рис. 1.7). Кро- 
ме того, в этом окне предусмотрены две кнопки: ОКи Отмена (Сапсе). В отличие от 
методов аегО и сопйгт( данный метод принимает два параметра: сообщение и зна- 
чение, которое должно появиться в текстовом поле ввода данных по умолчанию. Если 
пользователь щелкнет на кнопке О К, то метод вернет содержимое поля ввода данных, 
аесли он щелкнет на кнопке Отмена, то возвращается логическое значение #[5е (ложь, 
нет). Возвращаемое значение можно затем обработать в программе и, следовательно, 
создать эффект интерактивности, то есть диалогового взаимодействия программы 
с пользователем. Синтаксис применения метода рготр! имеет следующий вид: 
рготрКсообщение, значение _поля_ввода_данных) 


запрос пользователю АН М 


Запрос сценария г ОК ; 
Введите Ваш здргс Е тай к 

иутмена 
ото д е5 1. Г ре : 


Рис. 1.7. Диалоговое окно, созданное методом рготра 


Параметры метода рготр"() не являются обязательными. Если вы их не укажете, 
то будет выведено окно без сообщения, а в поле ввода данных подставлено значе- 
ние по умолчанию — ипаейпеа (не определено). Если вы не хотите, чтобы в поле 
ввода данных появлялось значение по умолчанию, то подставьте в качестве зна- 


чения второго параметра пустую строку "". Например, ргошрк"Введите Ваше имя, 
пожалуйста", "")(рис. 1.8). 


Запрос пользователю О > || 


Запрос сценария: ОК 


Оумена | 


[олдебтеч 


Рис. 1.8. Диалоговое окно, созданное методом рготр\@без параметров 


Диалоговое окно, выведенное на экран методом рготр"О, можно убрать щелчком 
на любой из двух кнопок— ОКили Отмена. Как и в случае использования метода 
сопйгиО, переход к ранее открытым окнам невозможен. 
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1.3. Типы данных 


В любом языке программирования очень важно понятие типа данных. Если не 
осознать его с самого начала, то потом придется часто сталкиваться со странным 
поведением созданной вами программы. Поэтому мы рекомендуем внимательно 
отнестись к данному разделу, чтобы потом не возвращаться к нему, теряя время 
на элементарные вещи. (Табл. 1.1.) 


Данные, которые хранятся в памяти компьютера и подвергаются обработке, мож- 
но отнести к различным типам. Понятие типа данных возникает естественным 
образом, когда необходимо применить к ним операции обработки. Например, опе- 
рация умножения применяется к числам, то есть к данным числового типа. Это 
известно еще из начальной школы. А что получится, если умножить слово «Вася» 
на число 5? Поскольку трудно дать вразумительный ответ на этот вопрос, напра- 
шивается вывод: некоторые операции не следует применять к разнотипным дан- 
ным. Мы также не знаем, что должно получиться в результате умножения слов 
«Вася» и «Маня», поэтому заключаем, что определенные операции вообще не 
применимы к данным некоторых типов. С другой стороны, существуют опера- 
ции, результат которых зависит от типа данных. Например, операция сложения, 
обозначаемая символом «“», может применяться и кдвум числам, и кдвум стро- 
кам, состоящим из произвольных слов. В первом случае результатом применения 
этой операции будет некоторое число, а во втором — строка, получающаяся путем 
приписывания второй строки к концу первой. В случае строк операцию сложе- 
ния еще называют склейкой или конкатенацией. Операции, применимые к раз- 
личным типам данных, но обозначаемые одним и тем же символом, называют также 
перегруженными. Так, операция, обозначаемая символом < ‚ является перегру- 
женной: применительно к числам она выполняет арифметическое сложение этих 
чисел, а применительно к строкам символов — склейку (приписывание, конка- 
тенацию). 


Таблица 1.1. Типы данных в уауа5 сир 


Тип данных Примеры Описаниезначений 

Строковый или "Привет" Последовательность символов, заключенная 
символьный ($19) "д.т. 123-4567" в кавычки, двойные или одинарные 

Числовой (питбег) 3.14 -567 +2.5 Число, последовательность цифр, перед которой 


может быть указан знак числа (+ или-); перед 
положительными числами не обязательно ставить 
знак «+»; целая и дробная части чисел 
разделяются точкой. Число записывается без 


кавычек 

Логический тгие Та!зе {гие (истина, да) или Та!е (ложь, нет); возможны 

(булевский, боо!еап) только два значения 

Ми Отсутствие какого бы то ни было значения 

Объект (оЦес{) Программныйобъект, определяемый своими 
свойствами. В частности, массив также является 
объектом 

Функция (КЮпсНоп) Определение функции — программного кода, 


выполнение которого может возвращать некоторое 
значение 
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На данном этапе следует обратить особое внимание на различия в представлении 
числовых и строковых (символьных) данных. Числа как данные числового типа 
всегда представляются без кавычек. Для их написания мы используем цифры и, 
при необходимости, знак числа и разделительную точку. Строковые данные за- 
ключаются в кавычки, двойные «"» или одинарные «’». Например, запись -345.12 
представляет число, а запись "-345.12” — строку символов. Это данные различ- 
ных типов, хотя мы и можем сказать, что их содержанием является одно и то же 
число. Но это не что иное, как обыденная интерпретация данных или, как еще 
говорят, семантика (смысл) данных. С точки зрения языка программирования 
число (точнее, данные числового типа) можно корректно использовать в арифме- 
тических операциях, а строки — в строковых операциях. Что означает «корректно 
использовать»? То, что использование данных в языке программирования долж- 
но соответствовать нашим традициям, не связанным с программированием. 
Например, обращение с числами корректно, если оно подчиняется правилам ма- 
тематики; обращение со строками корректно, если не противоречит правилам ре- 
дакторской правки текста (вставка, удаление, склейка фрагментов ит. п.). Язык 
программирования призван обеспечить в той или иной мере выполнение опера- 
ций, имеющих аналоги в обычной человеческой деятельности. Этой цели служит, 
в частности, и понятие типов данных. 


Заметим, что строка не содержащая ни одного символа (даже пробела), назы- 
вается пустой. При этом строка, содержащая хотя бы один пробел (например," ") 
не пуста. 


Данные логического типа могут иметь одно из двух значений: 1гае или Ё#[5е. Эти 
значения записываются без кавычек. Значение {гие означает истину (да), а бе - 
ложь (нет). Обычно эти значения получаются в результате вычисления выраже- 
ний с использованием операций сравнения двух данных, а также логических опе- 
раций (И, ИЛИ,НЕ). Например, результатом вычисления выражения 2 < 3 являет- 
ся, очевидно, значение {гие (действительно, число 2 меньше числа 3). Логический 
тип данных называют еще булевским (Бооеап) в честь английского математика 
Джона Буля, придумавшего алгебру для логических величин. 


Другие типы данных (М1, ОБес и ЕипсНоп) будут рассмотрены в следующих раз- 
делах, после изучения основ языка. 


При создании программ на ЛауаЗсирЕ за типами данных следит сам программист. 
Если он перепутает типы, то интерпретатор не зафиксирует ошибки, а попытает- 
ся привести данные к некоторму типу, чтобы выполнить указанную операцию. 
Вам следует разобраться, к какому именно типу приводится смесь данных раз- 
личного типа. Многие языки программирования, в том числе С и Разса|, не обла- 
дают этим С] ‚юм, они требуют явного указания типа данных. 


Например, если вЪ' напишете выражение 5+"Вася", то результатом его вычисле- 
ния будет строка символов 'ЗВЯ:- я’. Таким образом, интерпретатор, столкнувшись 
с выражением сложения числа и строки символов, переводит число в строку, со- 
держащую это число, а затем выполняет операцию сложения двух строк. Сложе- 
ние двух строк в ЛТауа5сирЕ дает в результате строку, получающуюся путем при- 
писывания второй строки к концу первой. 
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Результатом вычисления выражения 2+3 будет число 5, а выражения 2+"3" — стро- 
ка "23", состоящая из двух цифровых символов. Как нетрудно заметить, в случае 
применения операции сложения к числу и строке символов интерпретатор пре- 
образует число в строку символов и возвращает результат вычисления выражения 
тоже в виде строки символов. Иначе говоря, в случае смысловой несогласованно- 
сти типов данных интерпретатор использует некоторые правила их согласования, 
принятые по умолчанию. В результате могут появиться трудно выявляемые ошиб- 
ки. С другой стороны, эту особенность языка можно использовать для написания 
изящных и компактных кодов, соблюдая известную осторожность. Лично мне 
нравятся языки с так называемыми свободными типами данных. 


Для преобразования строк в числа в Лауа$сп!р{ предусмотрены встроенные функ- 
ции рагзешО и рагзеНоа{О. Что такое функция, мы подробно расскажем ниже 
в одном из разделов этой главы. А сейчас считайте, что это выражение с круглы- 
ми скобками, в которых можно указывать параметры. В результате вычисления 
функции получается некоторое значение. 


Функция ‚рагзеш(сфОКа, основание) преобразует указанную в параметре строку 
в целое число в системе счисления по указанному основанию (8, 10 или 16). 
Если основание не указано, то предполагается 10, то есть десятеричная систе- 
ма счисления. 


Примеры 


раг5е[п{ ("3.14") // результат= 3 

рагзеТ тт ( ) ) // результат = -7 

рагзеТпЕ ("435") // результат=435 

рагзеТ пт ("Вася") // результат = МаМ, то есть не является числом 
рагзе!пт ("15" ,8) // результат= 13 
рагзе!п+ ("ОхЕЕ",16) // результат=255 

Обратите внимание, что при преобразовании в целое число округления не проис- 


ходит: дробная часть просто отбрасывается. 


Функция рагзеНоа(сфроКа) преобразует указанную строку в число с плавающей 
разделительной (десятичной, основание) точкой. 


Примеры 
рагзе[!оа+ ("3.14") // результат= 3.14 
рагзе[1оа+ ("- 7.875") // результат = -7.875 
рагзеР!оа{ ("435") // результат = 435 
рагзеР!оа{ (“”Вася") // результат = МаМ, то есть не является числом 
рагзеР!оа{ ("17.5") // результат = 435 


Задача преобразования чисел в строки возникает реже, чем обратное преобразо- 
вание. Чтобы преобразовать число в строку, достаточно к пустой строке приба- 
вить это число, то есть воспользоваться оператором сложения « +». Например, 
вычисление выражения ""+3.14 даст в результате строку "3.14". Об операторах 
будет подробно рассказано ниже. 


Для определения того, является ли значение выражения числом, служит встроен- 
ная функция 1$МаМ(значение). Вычисление этой функции дает результат логиче- 
ского типа. Если указанное значение не является числом, функция возвращает 
{гие, иначе — #5е. Однако здесь понятие «число» не совпадает с понятием «зна- 
чение числового типа». Функции &МаМО считает числом и данные числового 
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типа, и строку, содержащую только число. Логические значения также иденти- 
фицируются как числа. При этом значению {гие соответствует 1,азначению #[5е — 
0. Таким образом, если 6МаМ возвращает Бе, то это означает, что значение пара- 
метра имеет числовой тип, либо является числом, преобразованным в строковый 
тип, либо является логическим (гие или #15е). 


Примеры 
13Мам(123) // результат Та]5е (то есть это - число) 
13Мам("123") /* результат Та!зе (то есть это - число, 
хотя и в виде строки) */ 
1 зМам ("50 рублей") // результат \гие (то есть это - не число) 
13М ам (Ехие) // результат а!зе 
1зМам (Еа1зе) // результат а!зе 


15МаМ ("Вася") // результат {гие (то есть это - не число) 


В заключение данного раздела рассмотрим так называемые служебные символы, 
которые можно вставлять в строки. 


Символ Описание 


\п Новая строка 

\ Табуляция 

\Е Новая страница 
\Ь Забой 


\ Возврат каретки 


Эти символы обычно используются при формировании строковых данных для их 
последующего отображения. Например, если мы хотим, чтобы сообщение, выводи- 
мое на экран в браузере Пиегпе{ Ехр|огег с помощью функции аег(, отображалось 
в виде нескольких строк, то следует использовать служебный символ п\ (рис. 19): 
а!егП"Фамилия - ИвановХпИмя - ИванХпОтчество - Иванович”) 


Месгозой 1п!епе! Ехр чого 


\ 


Г Фамилия - Иванов 


‚\ Имя: Иван 


Отчество. Иванович 


а 


Рис. 1.9. Окно, создаваемое функцией а!е[О, в случае когда строка 
сообщения содержит два символа п\ 


Иногда требуется отобразить символы, имеющие служебное назначение. Как, на- 
пример, отобразить кавычки, если они используются для задания строки симво- 
лов? Для этой цели используется <`» (обратная косая черта). Например, чтобы 
отобразить строку Акционерное общество "Рога и копыта" вместе с кавычками, сле- 
дует написать такую строку: "Акционерное общество \" Рога и копыта \"". Обратная 
косая черта указывает, что следующий непосредственно за ней символ не нужно 
интерпретировать как символ синтаксиса языка. В нашем примере она показыва- 
ет, что кавычки не являются признаком начала или окончания строковых дан- 
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ных, а являются просто элементом этих данных. В П\щегпе Ехрюгег выполнение 
выражения а1еИ:("Акционерное общество \"Рога и копыта\"") даст результат, пока- 
занный на рис. 1.10. 


'С2МР. | 


- —- -—- ——— - —_) 


Рис. 110. Выполнение выражения а!ег1:("Акционерное общество \"Рога и копыта\"") 


Заметим, что эту же задачу можно решить и несколько иначе, используя кавычки 
различных видов (двойные и одинарные). Во-первых, можно написать так: 'Акци- 
онерное общество "Рога и копыта”. В этом случае мы использовали одинарные ка- 
вычки в качестве признаков начала и конца всей строки. Во-вторых, можно поме- 
нять местами кавычки различных видов: "Акционерное общество 'Рога и копыта". 
Однако в этом случае название акционерного общества будет отображаться в оди- 
нарных кавычках. Наконец, можно внешние кавычки оставитьдвойными, а внут- 
ренние одинарные кавычки продублировать: "Акционерное общество "Рога и копы- 


та"". Тогда при отображении строки внутренние кавычки будут заменены на 
двойные. 


Неправильное использование кавычек довольно часто вызывает проблемы у 
НОВИЧКОВ. 


ВНИМАНИЕ = 
Кавычки, обрамляющие строковые данные, должны быть одного вида и использоваться 
парами. 


Интерпретатор, обнаружив в тексте программы кавычки, будет искать еще кавычки 
такого же вида, считая все находящееся между ними строковыми данными. 


ВНИМАНИЕ — м 


Внутри строки, заключенной в кавычки одного вида, можно использовать кавычки другого 
вида (иначе интерпретатор либо выдаст сообщение об ошибке, либо неправильно воспри- 
метданные). 


1.4. Переменные и оператор присвоения 


Что произойдет, если в программе просто написать данные какого-либо типа, на- 
пример число 314? Интерпретатор выполнит эту запись, разместив ее во внутрен- 
нем формате где-то в памяти компьютера. Вот и все. Чтобы сохранять данные 
в памяти и в то же время оставлять их доступными для дальнейшего использова- 
ния, в программах используются переменные. 
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1.4.1. Имена переменных 


Переменную можно считать контейнером для хранения данных. Данные, сохра- 
няемые в переменной, называют значениями этой переменной. Переменная име- 
ет имя — последовательность букв, цифр и символа подчеркивания без пробелов 
и знаков препинания, начинающуюся обязательно с буквы или символа подчер- 
кивания. 


Примеры правильных имен переменных: туРапйу, шу_а@гез$, _х, 1е1412_3456. 
Примеры неправильных имен переменных: 512етоир, туа@гез$, {е1:412 3456. 

При выборе имен переменных нельзя использовать ключевые слова, то есть сло- 
ва, используемые в определениях конструкций языка. Например, нельзя выби- 
рать слова уаг, №, е|5е, соп$, 1гиае, Бе, ГгапсНоп, зирег, з\ЙсВ и ряд других. Список 
ключевых слов приведен в разделе 1.11. Имя должно отражать содержание пере- 
менной. Если имя состоит из нескольких слов, то между ними можно вводить сим- 
вол подчеркивания или писать их слитно, начиная каждое слово с прописной бук- 
вы. Вот примеры: ту_Нгз(_аагез$, туЕи$(Аагез$. Иногда в качестве первого символа 
имени используют букву, указывающую на тип данных (значений) этой перемен- 
ной: с — строковый (спагащег), п — числовой (питбег), 6 —логический (БоФеап), 
о — объект (об]ес®), а — массив (аггау). Например сАагез$, пСепа, аМош®. 


Тауа$сире является регистрозависимым языком. Это означает, что изменение ре- 
гистра символов (с прописных на строчные и наоборот) в имени переменной при- 
водит к другой переменной. Например: уапае, Уапа Ме и уаК1а Ге — различные 
переменные. 


СОВЕТ 


Выработайте для себя правила образования имен, которые не должны противоречить ука- 
занным выше требованиям. Если им следовать, то уменьшится вероятность ошибок в ва- 
ших программах. 


1.4.2. Создание переменных 


Создать переменную в программе можно несколькими способами: 
‚ С помощью оператора присвоения значений в формате: 
имя переменной = значение 
Оператор присвоения обозначается символом равенства «=». 
Пример: 
шуМаше = "Иван" 
. С помошью ключевого слова уаг (от уапа Ме — переменная) в формате: 
уаг имя_переменной 


В этом случае созданная переменная не имеет никакого значения, но может его 
получить в дальнейшем с помощью оператора присвоения. 


Пример: 
\уаг ппуМате 
ппуМате = "Иван" 
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. С помощью ключевого слова уаг и оператора присвоения в формате: 
\уаг имя переменной = значение 
Пример 
маг пуМате = "Иван" 


Строка кода программы с ключевым словом уаг задает так называемую" инициа- 
лизацию переменной и для каждой переменной используется один раз. Тип пере- 
менной определяется типом значения, которое она имеет. В отличие от многих 
других языков программирования, при инициализации переменной не нужно опи- 
сывать ее тип. Переменная может иметь значения различных типов и неодно- 
кратно их изменять. Например, вы можете написать следующий код программы: 

уаг х = "Иван" 

// некоторый код 

х = "Анна" 

// некоторый код 

х = 2.5 
Одно ключевое слово уаг можно использовать для инициализации сразу несколь- 
ких переменных, как с оператором присвоения, так и без него. При этом перемен- 
ные и выражения с операторами присвоения разделяются запятыми, например: 


уаг пате = "Вася", а4@гез$, х = 3.14 


Если переменная в данный момент имеет значение числового типа, то говорят, 
что это числовая переменная. Аналогично можно говорить о строковых, логиче- 
ских (булевских), неопределенных (в случае типа пи!) переменных. 


Выше мы использовали оператор присвоения значения переменной, обозначае- 
мый символом равенства --=*. Не следует путать этот оператор с отношением ра- 
венства и соответствующей операцией сравнения. Выражение с оператором «=» 
интерпретатор вычисляет следующим образом: переменной слева от него присва- 
ивается значение, расположенное справа от него. 


Если хиу — две переменные, то выражение х = у интерпретируется так: перемен- 
ной х присваивается значение переменной у. Иначе говоря, переменной можно 
присвоить значение другой переменной, указав справа от оператора «=» ее имя. 
Таким образом, к значениям можно получать доступ опосредованно — через имена 
переменных. В следующих разделах мы узнаем, что справа от оператора присвое- 
ния можно писать не только значения и имена переменных, но и целые выраже- 
ния. В подразделе 1.5.3 будут рассмотрены дополнительные операторы присвое- 
ния, такие как +=, -= ит. п. 


1.4.3. Область действия переменных 


Переменные, которые созданы в программе с помощью оператора присвоения 
с использованием ключевого слова уаг или без него, являются глобальными. Это 
означает, что они доступны всюду в этой же программе, а также в вызываемых 
программах из других файлов. Эти переменные также доступны внутри кода функ- 
ций. Функциям в нашей книге посвящен специальный раздел. 


Кроме глобальных существуют и локальные переменные. Они могут быть созда- 
ны внутри кода функций. Вы можете определить переменные с одинаковыми на- 
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званиями и во внешней программе, и в коде функции. В этом случае переменные, 
определенные в коде функции с помощью ключевого слова уаг, будут локальны- 
ми: изменения их значений внутри функции никак не отразятся на переменных 
с такими же именами, определенных во внешней программе. При этом значения 
локальных переменных не доступны из внешней программы. 


Мы еше неоднократно будем говорить об области действия переменных. Здесь 
лишь отметим, что в программировании это понятие играет очень важную роль. 
Нередко область действия называют областью видимости. Переменная может быть 
видна или не видна внутри программной единицы (функции, подпрограммы). 
Область видимости, доступности или действия переменной — эквивалентные тер- 
мины. Кроме них еще используют понятие времени жизни переменной. Время 
жизни переменных в ЛГауа$ст!ре определяется интервалом времени от загрузки до 
выгрузки программы из памяти компьютера. Так, если программа (сценарий) за- 
писаны в НТМГ-коде веб-страницы, то после его выгрузки весь сценарий вместе 
с определенными в нем переменными прекращает активное существование. 


1.5. Операторы 


Операторы предназначены для составления выражений. Оператор применяется 
к одному или двум данным, которые в этом случае называются операндами. На- 
пример, оператор сложения применяется к двум операндам, а оператор логиче- 
ского отрицания — к одному операнду. Элементарное выражение, состоящее из 
операндов и оператора, вычисляется интерпретатором и, следовательно, имеет 
некоторое значение. В этом случае говорят, что оператор возвращает значение. 
Например, оператор сложения, примененный к числам 2 и 3, возвращает значе- 
ние 5. Оператор имеет тип, совпадающий с типом возвращаемого им значения. 
Поскольку элементарное выражение с оператором и операндами возвращает зна- 
чение, это выражение можно присвоить переменной. 


Один оператор мы уже рассмотрели в предыдущем разделе. Это оператор присво- 
ения «=». Мы часто будем его использовать. Однако следует заметить, что суще- 
ствует еще пять разновидностей оператора присвоения, сочетающих в себе дей- 
ствия обычного оператора «= и операторов сложения, вычитания, умножения, 
деления и деления по модулю. Эти дополнительные операторы присвоения мы 
рассмотрим позже в подразделе 1.5.3. 


1.5.1. Комментарии 


Начнем с операторов комментария. Они позволяют выделить фрагмент програм- 
мы, который не выполняется интерпретатором, а служит лишь для пояснений 
содержания программы. 


В ГТауабсире допустимы два вида операторов комментария: 


. //— одна строка символов, расположенная справа от этого оператора, счита- 
ется комментарием; 


. /\*...*/ — все, что заключено между/* и */, считается комментарием; с помощью 
этого оператора можно выделить несколько строк в качестве комментария. 
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СОВЕТ а : — 
Не пренебрегайте комментариями в тексте программ. Это поможет при их отладке и со- 
провождении. На этапе разработки лучше сначала превратить ненужный фрагмент про- 
праммы в комментарий, чем просто удалить (а вдруг его придется восстанавливать?). 


Даже опытные программисты, возвращаясь к работе над своей программой через 
месяц, с большим трудом вспоминают, что кчему. В примерах программ мы часто 
будем использовать комментарии. 


1.5.2. Арифметические операторы 


Арифметические операторы, такие как сложение, умножение ит. д., в Лауазсире 
могут применяться кданным любых типов. Что из этого получается, мы рассмот- 
рим немного позже. А сейчас просто перечислим их (табл. 1,2). 


Таблица 1.2. Арифметические операторы 


Оператор Название Пример 

ы Сложение Х+У 
Вычитание Х-\ 
Умножение ЖУ 

/ Деление ХМ 

% Деление по модулю Ху 

++ Увеличение на 1 Хн+ 

— ть __ Уменьшение на 1 У- 


Арифметические операторы лучше всего понять на примере чисел. Первые четы- 
ре оператора все проходили в начальных классах. Оператор деления по модулю 
возвращает остаток отделения первого числа на второе. Например, 8%3 возвра- 
щает 2. Операторы «++» и «-» сочетают в себе действия операторов соответствен- 
но сложения и вычитания, а также присвоения. Выражение Х+-+ эквивалентно 
выражению Х-, а выражение Х— эквивалентно выражению Х-1. 


Операторы «++» и <- называют соответственно инкрементом и декрементом. 


Символ <-> используется не только как бинарный (для двух операндов) оператор 
сложения, но и как унарный (для одного операнда) оператор отрицания для ука- 
зания того, что число является отрицательным. 


Примеры 
у=5 // значение переменной у равно 5 
х=у + 3 // значение переменной х равно 8 (5+3) 
х++ // значение переменной х стало равным 9 (8+1) 
// значение переменной х стало равным 8 (9-1) 
у++ // значение переменной у равно 6 (5+1) 
5-3 // значение равно 2 
-3 // отрицательное число 


Однако формально ничто не мешает нам применить эти операторы к данным дру- 
гих типов. В случае строковых данных оператор сложения дает в результате стро- 


34 Глава 1. Основы ЧауаЗсирт 


ку, полученную путем приписывания справа второй строки к первой. Например, 
выражение "Вася"+ "Маша" возвращает в результате "ВасяМаша". Поэтому для строк 
оператор сложения называется оператором склейки или конкатенации. Приме- 
нение остальных арифметических операторов к строкам дает в результате МаМ - 
значение, не являющееся числом (подробности см. в подразделе 1.7.3. В случае, 
когда оператор сложения применяется к строке и числу, интерпретатор перево- 


дит число в соответствующую строку и далее действует как оператор склейки двух 
строк. 


ПримеВ 
х = "Вася" // значение переменной х равно “Вася" 
У „Маша“ // значение переменной у равно "Маша" 
Ех + +у // значение переменной 2 равно “Вася Маша“ 
= х+5 // значение переменной 7 равно "Васяя 
п = "20" + /* значение переменной п равно "205", 


а не 30 или "30" */ 


В случае логических данных интерпретатор переводит логические значения опе- 
рандов в числовые (1тие в 1, ШБев 0), выполняет вычисление и возвращает число- 


вой результат. То же самое происходит в том случае, когда один оператор логи- 
ческий, а другой — числовой. 


Примеры 

{гие + ние //возвращает2 

{гие + Та!зе // возвращает 1 

1гие * ние //возвращает 1 

1гие/Р!а!зе /* возвращает пи !у (Неопределенность, 

так как на ноль делить нельзя) */ 

1гие + //возвращает 6 

фазе + 5 //возвращает 5 

гие * 5 // возвращает 5 

гие / 5 //возвращает 0.2 


Если один операнд строкового типа, а другой — логического, то в случае сложе- 
ния интерпретатор переводит оба операнда в строковый тип и возвращает строку 


символов, а в случае других арифметических операторов он переводит оба опе- 
ранда в числовой тип. 


Примеры 
"Вася" + (гие // возвращает "Васй@те" 
"5" + ние // возвращает "Эе" 
"Вася" " 1гие /“ возвращает №М @о есть значение, 
не являющееся числом) */ 
(гие // возвращает 5 
"5" * [Газе // возвращает 0 
"5" / цие // возвращает 5 


На первый взгляд, применение арифметических операторов к разнотипным дан- 
ным может показаться довольно запутанным. Поэтому советую новичкам, осо- 
бенно на первых порах, руководствоваться следующими простыми правилами: 


® применяйте арифметические операторы кданным одного и того же типа; 


оператор сложения применительно к строкам действует как оператор их склей- 
ки (приписывания, конкатенации); 


1.5. Операторы 35 


. в случае применения арифметических операторов к логическим данным ин- 
терпретатор рассматривает значения {гие и #[5е как числа соответственно | и О, 
и возвращает результат в числовом виде. 


Кроме этих правил нужно помнить, что в Лауа$ сир" имеются средства для преоб- 
разования типов данных, то есть для преобразования данных одного типа в дан- 
ные другого типа. К этому вопросу мы вернемся позже, а сейчас рассмотрим дру- 
гие операторы. 


1.5.3. Дополнительныеоператоры присвоения 


В начале этого раздела мы уже говорили, что кроме обычного оператора присвое- 
ния «=» имеются еще пять дополнительных операторов, сочетающих в себе дей- 
ствия обычного оператора присвоения и арифметических операторов. 


Оператор _ Пример | Эквивалентное выражение | 
фе ХУ Хх = Хх + У 
Х-= ХЕХ-У 
"- ху х-Х*У 
/- Х/= х=хХ/\ 
%= ХХ % = У = х %= У 


Поскольку действие арифметических операторов и обычного оператора присвое- 
ния уже известны, дополнительные операторы присвоения мы не будем здесь по- 
дробно рассматривать. Обратим лишь внимание на экономный способ записи 
выражений, предоставляемый этими операторами. 


Пример: 
х = "Вася" 
х+= ", привет" // "Вася, привет" 


1.5.4. Операторысравнения 


В программах часто приходится проверять, выполняются ли какие-либо условия. 
Например, на веб-страницах иногда проверяется, является ли браузер пользова- 
теля Мсгозой Пиегпе Ехр]огег или М№есаре Мамюабог. В зависимости от резуль- 
тата процесс дальнейших вычислений может пойти по тому или другому пути. 
Проверяемые условия формируются на основе операторов сравнения, таких как 
«равно», «меньше», «больше» и т. п. Результатом вычисления элементарного выра- 
жения, содержащего оператор сравнения и операнды (сравниваемые данные), явля- 
ется логическое значение, то есть {гие или #[5е. Так, если условие выполняется (вер- 
но, справедливо), то возвращается {гие. В противном случае возвращается Бе. 


Оператор Название Пример 
== Равно Х= = 
[Е Не равно. Х |-У 


продолжение К 
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Оператор Название Пример 
> Больше, чем Х*У 

Больше или равно (не меньше) Х>=У 

Меньше, чем Х<Уу 

Меньше или равно (не больше), ‚Х <=У 
ВНИМАНИЕ - 


Оператор «равно» записывается с помощью двух символов-без пробелов между ними. 


Сравнивать можно числа, строки и логические значения. Сравнение чисел проис- 
ходит по правилам арифметики, а строк — путем сравнения АЗСП-кодов симво- 
лов начиная с левого конца строк. Логические значения сравниваются так же, как 
ичисла 1 ид (гие соответствует 1, а Ёа15е — 0). Как видим, с числами и логически- 
ми данными все довольно просто. А вот результат сравнения строк не всегда оче- 
виден. 


Примеры 

"абса"=="абс" // возвращает Та!зе 
абса" // возвращает Та!зе 
"абса" // возвращает {гие 

=" абед” /х возвращает Та!зе (1-й символ 

2-го операнда - пробел) */ 

"аре" > " абед”" // возвращает гие 
"абс" < "абед" // возвращает {гие 
"235аб" < "абсахуг" // возвращает {гие 
5хул" < "абс" // возвращает Тгие 


Мы не приводим здесь таблицу кодов АЗСПИ для всех символов. Отметим лишь, 
что некоторые из них упорядочены в порядке возрастания АЗСП-кодов следую- 
щим образом: сначала идет пробел, затем в порядке возрастания цифры от 0 до 9, 
символ подчеркивания, латинские и кириллические буквы по алфавиту (сначала 
прописные, а затем строчные). 


Заметим, что операторы сравнения могут быть применены и к разнотипным дан- 
ным. Если сравниваются строка и число, то интерпретатор приводит операнды 
к числовому типу. То же самое происходит при сравнении логических данных 
и числа. Если сравниваются логические данные и строка, то дело обстоит несколь- 
ко сложнее. В этом случае результат не зависит от содержимого строки. Если она 
содержит число (но не цифры с буквами), только пробелы или является пустой, 
то операнды приводятся к числовому типу. При этом пустая строка ("") или со- 
держащая только пробелы преобразуется в число 0. В остальных случаях все опе- 
раторы сравнения, кроме «!= *, будут возвращать бе (а оператор «!=»› — противо- 
положный результат, то есть гие). 


Примеры 
Га1е < "57", й возвращает {гие 
Ра15е < "-2.5 / возвращает Ёа1зе 
(ие >= "0.5", // возвращает 1гае 
Ра1зе < "57аБ // возвращает Ёа1<е 


Ра!зе > "57аб" возвращает #а1зе 


1.5. Операторы,7 


дырБнБвББ 


{гие == "гие" // возвращает Ёа15е 
{гие != "гие" // возвращает фгие 
{тие <= "ие" // возвращает #а15е 
{тие >= "гие" // возвращает Ёа15е 
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1.5.5.Логическиеоператоры 


Логические данные, обычно получаемые с помощью элементарных выражений, 
содержащих операторы сравнения, можно объединять в более сложные выраже- 
ния. Для этого используются логические (булевские) операторы — логические 
союзы И и ИЛИ, атакже оператор отрицания НЕ. Например, нам может потребо- 
ваться сформировать сложное логическое условие следующего вида: «возраст не 
более 30 и опыт работы больше 10, или юрист». В этом примере есть и операторы 
сравнения, илогические операторы. Выражения с логическими операторами воз- 
вращают значение {гие или 1ае. 


Оператор Название Пример 
| Отрицание (НЕ) х 
&& И Х&&\ 


| ИЛИ ху 


Оператор отрицания :! » применяется к одному операнду, изменяя его значение 
на противоположное: если Х имеет значение 1гие, то !Х возвращает значение #[е, 
инаоборот, если Х имеет значение #а|5е, то !Х возвращает значение {гие. 


Ниже в таблице указано, какие значения возвращают операторы Ии ИЛИ при раз- 
личных логических значениях двух операндов. 


У Х&&\ Х11У 
1гие 1гие 1гие 1гие 
тгие та!5е та 5е тгие 
та!5е {гие Та!5е {гие 
та 5е та 5е тазе_ та!зе 


Операторы «&&» и << еше называютлогическим умножением и логическим сло- 
жением соответственно. Если вспомнить, что значению {гие можно сопоставить | 
а значению #15е — 0, то нетрудно понять, как вычисляются значения элементар- 
ных выражений с логическими операторами. Нужно только учесть, что в алгебре 
логики | + 1|== 1 (ане 2). Аналогично оператору отрицания соответствует вычита- 
ние из единицы числового эквивалента логического значения операнда. В мате- 
матике логические операции И и ИЛИ называют соответственно конъюнкцией 
и дизъюнкцией. 


СОВЕТ 


Чтобы не запутаться, не применяйте логические операторы к нелогическим данным и осо- 
бенно к разнотипным данным. 
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Примеры 
х = зе 1| 2*2 == // значение переменной х равно гие 
х = 5<2 1]|"абед" <=“"ху" // значение переменной х равно 1гие 
у = м // значение переменной у равно Та!5е 
7 Ех && У // значение переменной 7 равно Та!5е 
р=Х || У и значение переменной 2 равно {гие 


Сложные логические выражения, состоящие из нескольких более простых, со- 
единенных операторами И и ИЛИ, выполняются по так называемому принципу 
короткой обработки. Дело в том, что значение всего выражения бывает можно 
определить, вычислив лишь одно или несколько более простых выражений, не 
вычисляя остальные. Например, выражение х&&у вычисляется слева направо; если 
значение х оказалось равным #1[5е, то значение у не вычисляется, поскольку и так 
известно, что значение всего выражения равно Ё#[5е. Аналогично если в выраже- 
ниих 11 узначение х равно (гие, то значение у не вычисляется, поскольку уже ясно, 
что все выражение равно 1гие. Данное обстоятельство требует особого внимания 
при тестировании сложных логических выражений. Так, если какая-нибудь со- 
ставная часть выражения содержит ошибку, то она может остаться невыявлен- 
ной, поскольку эта часть выражения просто не выполнялась при тестировании. 


1.5.6. Операторы условного перехода 


Вычислительный процесс можно направить по тому или другому пути в зависи- 
мости от того, выполняется ли некоторое условие или нет. Этой цели служат опе- 
раторы условного перехода Фи $\Исп. 


Оператор # 
Оператор условного перехода И позволяет реализовать структуру условного вы- 
ражения если ..., ТО ..., иначе ... 


Синтаксис оператора Ш перехода следующий: 


й (условие) 
{ код, который выполняется, если условие выполнено} 
е!5е 
{ код, который выполняется, если условие не выполнено} 
В фигурных скобках располагается блок кода — несколько выражений. Если в бло- 
ке используется не более одного выражения, то фигурные скобки можно не пи- 
сать. Часть этой конструкции, определяемая ключевым словом е|5е (иначе), не- 
обязательна. В этом случае остается только часть, определенная ключевым словом 
Ш (если): 
# (условие) 
{ код, который работает, если условие выполнено} 
Конструкция оператора условного перехода допускает вложение других операто- 
ров условного перехода. Условие обычно представляет собой выражение логи- 
ческого типа, то есть выражение, значение которого есть {гие или 6е. Обычно 
это элементарные выражения с операторами сравнения. 


Примеры 


1. Выводится диалоговое окно с тем или иным сообщением в зависимости от зна- 
чения переменной асе (возраст). 
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#й (а9е<18) 

{а1ег{С'ВЬ! слишком молоды для просмотра этого сайта“)} 
е!5е 

{а!ег{("Подтвердите свое решение заглянуть на этот сайт")} 


2. Выводится диалоговое окно с сообщением, если только значение переменной 
аде меньше 18. 
| (а9е<18) 
{а1ег{С'ВЬ! слишком молоды для просмотра этого сайта“)} 
Делать ли отступы при написании операторов, где располагать фигурные скоб- 
ки — дело вкуса. Следует руководствоваться наглядностью и ясностью структу- 
ры, при которой легко проверить правильность расстановки скобок. Кроме опи- 
санного выше способа, часто встречается еще и такой: 


Й (условие) { 
код. который работает, если условие выполнено 


} е5е { 
код, который работает, если условие не выполнено 
} 


Возможно, этот способ записи лучше отражает структуру оператора условного 
перехода. 


Более сложная структура оператора условного перехода получается при вложе- 
нии других операторов 


Н (условие!) { 
код, который работает, если условие! выполнено 
} еазе { 1Е (условие?) { 
код, который работает, если условие? выполнено 
}е1зе{ 
код, который работает, если условие? не выполнено 


} 


Выше мы уже отмечали, что условие в операторе обычно является логическим 
выражением. Однако это может быть также и строковое, и числовое выражение. 
В случае строкового выражения условие считается выполненным, если его значе- 
нием является непустая строка. Напомним, что пустая строка "" не содержит ни 
одного символа, в том числе и пробела (строка, содержащая хотя бы один пробел, 
не пуста). В случае числового выражения условие считается выполненным, если 
его значением является число, отличное от нуля. Во многих случаях эта много- 
значность типа условия оказывается очень удобной. 


Допустим, что переменная х содержит данные, которые ввел пользователь, и нам 
требуется проверить, что он действительно что-то ввел. В следующем примере 
мы проверяем, что значение переменной х не пусто (не 0, не пустая строка "" и не 
пи). Если х пусто, то выводится соответствующее сообщение: 

и (1х) { 


аеч“С"ВЫ ничего не ввели") 
} 


Заметим, что поскольку в этом примере блок кода содержит всего лишь одно вы- 
ражение, постольку фигурные скобки можно опустить, да и всю конструкцию опе- 
ратора условного перехода можно записать в одной строке: 

К (№ аеи“С'Ы ничего не ввели“) 
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Оператор $мЁсП 


Для организации проверки большого количества условий вполне достаточно ис- 
пользовать рассмотренный выше оператор # Однако в случае нескольких усло- 
вий более удобным и наглядным оказывается оператор з\ИсВ (переключатель). 
Он особенно удобен, если требуется проверить несколько условий, которые не 
являются взаимоисключающими. 
Синтаксис оператора 5\ИсВ выглядит следующим образом: 
з\уИсв (выражение) { 
сазе вариант!: 
КОД 
[ргеак] 
сазе вариант?: 


код, 
[ргеак] 


[Ч4егаий: 
КД] 
} 


Параметр выражение оператора з\\сВ может принимать строковые, числовые и ло- 
гические значения. Разумеется, в случае логического выражения возможны толь- 
ко два варианта. Ключевые слова (операторы) БгеаК и ае!аий не являются обяза- 
тельными, что отражено с помощью прямоугольных скобок. Здесь они являются 
элементами описания синтаксиса, и при написании операторов их указывать не 
нужно. Если оператор ФгеаК указан, то проверка остальных условий не произво- 
дится. Если указан оператор Аеаи, то следующий за ним код выполняется, если 
значение выражения не соответствует ни одному из вариантов. Если все вариан- 
ты возможных значений предусмотрены в операторе з\уйсВ, то оператор АеЁаи Е 
можно не использовать. 


Оператор з\ЙсВ работает следующим образом. Сначала вычисляется выражение, 
указанное в круглых скобках сразу за ключевым словом з\Исв. Полученное зна- 
чение сравнивается с тем, которое указано в первом варианте. Если они не совпа- 
дают, то код этого варианта не выполняется и происходит переход к следующему 
варианту. Если же значения совпали, то выполняется код, соответствующий это- 
му варианту. При этом, если неуказан оператор ОгеакК, то выполняются коды и ос- 
тальных вариантов, пока не встретится оператор БгеаК. Это же правило действует 
и для остальных вариантов. 


Пример 
.х=2 
5УИ5ей (< { 
сазе 1: 
а1егЕ (1) 
сазе 2: 
а1егё (2) 
сазе 3: 
а1егё (3) 
} 


В приведенном примере сработают 2-й и 3-Й варианты. Если мы хотим, чтобы 
сработал только один какой-нибудь вариант (только тот, который соответствует 
значению выражения), то нужно использовать оператор Фгеак. 


15. Операторы _ 41 


Пример 
х=Е2 
змИзсИ (х) { 
сазе 1: 
а1еге (1); 
БгеаК 
сазе 2: 
а1егё (2); 
БгеаК 
сазе 3: 
а1егЁ(3) ; 
Бгеак 
} 


В этом примере сработает только 2-й вариант. 


Пример 
Допустим, переменная х|ап® содержит название языка, который выбрал пользо- 
ватель и ввел в поле формы. Тогда возможен такой вариант применения оп1ерати 


ра 5\Есв: 


$МИ$сй (хапо) { 

сазе “английский“ : 
ммпдом.ореп (“епд!. Вт”); 
Ьгеак 

сазе "французский": 
мтадом.ореп ("1гепсй „.И+т”) ; 
Огеак 

сазе “немецкий“ : 
мпаом.ореп("дегтапт. Вт"); 
ОгеаКк 

егаи!: 
а1 нас нет документа на таком языке") 


/ 


Здесь выражение ушдо\.орепО открывает новое окно браузера и загружает в него 
указанный в скобках НТМГ-документ. Заметим, что эту же задачу можно решить 
и с помощью вложенных операторов 
И (Хапд == “английский") 
мта4ом. ореп ("епд! .И+т”) 
е15е { 
# (СШапё == "французский") 
мтпдом. ореп ("1гепсй .И+т”) ; 
ее { 
# (Оапё == "немецкий") 
м1 пдом.ореп ("дегмат. Пт”) 
/ ее 
а|егёС'У нас нет документа на таком языке"); 


Для тренировки перепишем приведенный выше код в другом виде: 


И (апд == "английский") мипаом.ореп("епа!.В+т”) 
ее { Н (хапд == "французский") мтао\м. ореп("гепсп. мт") 
е5зе { И (хапд == "немецкий") \м паом. ореп ("дегтап . Пт 


е!5е а[ег! {С”Унас нет документа на таком языке") 


} 
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1.5.7. Операторы цикла 


Оператор цикла обеспечивает многократное выполнение блока программного кода 
до тех пор, пока не выполнится некоторое условие. В Лауа5сире предусмотрены 
три оператора цикла: Юг, \Ше и 4о-\уП!Пе. Вообще говоря, при создании программ 
вполне можно обойтись одним из них, Ююгили \ППе. Мне, например, больше нра- 
вится \ВПе. Однако возникают ситуации, в которых один из операторов более 
удобен или естествен, чем другой. 


Оператор Тог 


Оператор Юг (для) также называют оператором со счетчиком циклов, хотя в нем 
совсем не обязательно использовать счетчик. Синтаксис этого оператора следую- 


щий: 
Тог ( [начальное выражение] ; [условие] ; [выражение обновления] ) 


{ 
код 


Здесь квадратные скобки лишь указывают на то, что заключенные в них парамет- 
ры не являются обязательными. Как и в случае оператора условного перехода, 
возможна и такая запись: 


Тог ( [начальное выражение] ; [условие] ; [выражение обновления] ) { 
код 
} 


Все, что находится в круглых скобках справа от ключевого слова Юг, называется 
заголовком оператора цикла, а содержимое фигурных скобок — его телом. 


В заголовке оператора цикла начальное выражение выполняется только один раз 
в начале выполнения оператора. Второй параметр представляет собой условие 
продолжения работы оператора цикла. Он аналогичен условию в операторе ус- 
ловного перехода #. Третий параметр содержит выражение, которое выполняется 
после выполнения всех выражений кода, заключенного в фигурные скобки. 


Оператор цикла работает следующим образом. Сначала выполняется начальное 
выражение. Затем проверяется условие. Если оно выполнено, то оператор цикла 
прекращает работу (при этом код не выполняется). В противном случае выпол- 
няется код, расположенный в теле оператора Юг, то есть между фигурными скоб- 
ками. После этого выполняется выражение обновления (третий параметр опера- 
тора ог). Таким образом, заканчивается первый цикл или, какеще говорят, первая 
итерация цикла. Далее снова проверяется условие, и все повторяется описанным 
выше способом. 


Обычно в качестве начального выражения используют оператор присваивания 
значения переменной. Например, 1 = Оилиуаг! = 0. Имя переменной и присваива- 
емое значение могут быть любыми. Эту переменную называют счетчиком цик- 
лов. В этом случае условие, как правило, представляет собой элементарное выра- 
жение сравнения переменной счетчика циклов с некоторым числом, например, 

*ПМах Выражение обновления в таком случае просто изменяет значение счет- 
чика циклов, например! =1 + 1 или, короче, 1+ +. 


В следующем примере оператор цикла просто изменяет значение своего счетчи- 
ка, выполняя 15 итераций: 
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Рог (= 1; 1 <= 15; НН $ 
Немного модифицируем этот код, чтобы вычислить сумму всех целых положи- 
тельных чисел от 1 до 15: 


уагз $=1 

Рог (= 1; 1 <= 15; НЗ { 
$ЕЗ+1 

} 


Заметим, что счетчик циклов может быть не только возрастающим, но и убываю- 
щим. 

Пример 

Допустим, требуется вычислить х в степени у, где х, у — целые положительные 
числа. Алгоритм решения этой задачи прост: надо вычислить выражение х*х*х* ... х, 
в котором сомножитель х встречается у раз. Очевидно, что если у не превышает 
10, то можно воспользоваться оператором умножения: выражение будет не очень 

длинным. А как быть в том случае, когда у равно нескольким десяткам или сот- 
ням? Ясно, что в общем случае следует воспользоваться оператором цикла: 


/* Вычисляем х в степени у */ 
уаг 7 = х // < хранит результат 
Юг (= 2 у 1 <= у; ++) { 


#4. 


В этом примере результат сохраняется в переменной 7. Начальное ее значение 
равно х. Если у равно 1, то оператор цикла не будет выполняться, поскольку не 
выполняется условие 2 <= 1 (обратите внимание на начальное значение счетчика 
циклов), — и, следовательно, мы получим верный результат: х в степени 1 равнох. 
Если у равно 2, то оператор цикла выполнит одну итерацию, вычислив выраже- 
ние = 7*х при 7, равном х (то есть 7 = х*х). Приу, равном 3, оператор цикла сделает 
две итерации. На второй, последней итерации выражение 7 = 7*х вычисляется при 
текущем значении 7, равном х*х, и, следовательно, становится равным х*х*х (то - 
есть х в степени 3). 

Пример 

Рассмотрим довольно традиционный при изучении операторов цикла пример 
вычисления факториала числа. Факториал числа п в математике обозначают как 
п!. Для п, равного 0 и 1, п! равен 1. В остальных случаях п! равен 2*3*4* ... *п. 
Поскольку возможны два варианта исходных данных, нам потребуется использо- 
вать оператор условного перехода. Код, решающий эту задачу, выглядит следую- 
щим образом: 


/* Вычисляем п! */ 


маг 7 = 1 Л г хранит результат п! 
Й (п>1) { 
ог (1 =2:1 <=п 
2=7*1 


Для принудительного (то есть не по условию) выхода из цикла используется опе- 
ратор БтеаК (прерывание). Если вычислительный процесс встречает этот опера- 
тор в теле оператора цикла, то он сразу же завершается без выполнения последу- 
ющих выражений кода в теле и даже выражения обновления. Обычно оператор 
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ЬгеаК применяется при проверке некоторого дополнительного условия, выполне-' 
ние которого требует завершения цикла, несмотря на то что условие в заголовке 
цикла еще не выполнено. Типовая структура оператора цикла с использованием 
БгеаК имеет следующий вид: 


юг ( [начальное выражение] ; [условие!| ; [выражение обновления] ) 


{ 
ое 
1ЁЕ (условие2){ 
КОД 
Ьгеак 


код 
Для управления вычислениями в операторе цикла можно также использовать 
оператор сопИпче (продолжение). Также, как и Отеак, этот оператор применяется 
в теле оператора цикла вместе с оператором условного перехода. Однако, в отли- 
чие от Бгеак, оператор сопипие прекращает выполнение последующего кода, вы- 
полняет выражение обновления и возвращает вычислительный процесс в начало 
оператора цикла, где производится проверка условия, указанного в заголовке. 
Типовая структура оператора цикла с использованием ФтеаК имеет следующий вид: 

Юг ( [начальное выражение] ; лови] ; [выражение обновления] ) 


| 
код 
Ш (условие?) 
код 
сопипие 


} 
код 


} 
Оператор мп!е 


Оператор цикла \ПЦе (до тех пор, пока) имеет структуру более простую, чем опе- 
ратор Юг, и работает несколько иначе. Синтаксис этого оператора следующий: 


У\ППе ( условие ) 
| 


} 


При выполнении этого оператора сначала производится проверка условия, ука- 
занного в заголовке, то есть в круглых скобках справа от ключевого слова \ППе. 
Если оно выполняется, то выполняется код в теле оператора цикла, заключенно- 
го в фигурные скобки. В противном случае код не выполняется. При выполнении 
кода (завершении первой итерации) вычислительный процесс возвращается 
к заголовку, где снова проверяется условие, ит. д. 


код 


Если сравнивать оператор \ВЦе с оператором Юг, то особенность первого заклю- 
чается в том, что выражение обновления записывается в теле оператора, а не в за- 
головке. Часто забывают указать это выражение, и в результате цикл не заверша- 
ется (программа «зависает»). 


Рассмотрим несколько примеров решения задач, которые мы уже решали ранее 
с использованием оператора цикла Юг. 
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Пример 
Возведение х в степень у. 


/* Вычисляем х в степени у */ 


уаг - АХ // 2 хранит результат 
= 
У%ВИе (1 = 2) { 

7= 7*Х 

1++ 


Пример 
Вычисление п!. 
/* Ввычисляем п! */ 


уаг и = 1 
Е > { // 2 хранит результат п! 
1=2 
мпНе (т <= т ) { 
д 


Во всех приведенных выше примерах использовался счетчик циклов. Однако он 
инициировался заранее, до оператора цикла. Обновление значения этого счетчи- 
ка производилось в теле оператора цикла. 


Для управления вычислительным процессом в операторе \е, также как и в опе- 
раторе юг, можно использовать операторы прерывания ФгеаК и продолжения 
сопИпие. 


ВНИМАНИЕ 


Если в мПИе вы используете счетчики циклов, то будьте осторожны, применяя Бгеак 
и сопипие. 


Оператор 4о-мтйе 


Оператор 40-уЙе (делай до тех пор, пока) представляет собой конструкцию 
из двух операторов, используемых совместно. Синтаксис этой конструкции сле- 
дующий: 

Чо { 

код 

4 

мпИе (условие) 
В отличие от оператора \ВЦе в операторе 4о-\П!е код выполняется хотя бы один 
раз, независимо от условия. Условие проверяется после выполнения кода. Если 
оно истинно, то снова выполняется код в теле оператора 4о. В противном случае 
работа оператора 4о-\Ю|е завершается. В операторе \ВШе условие проверяется 
в первую очередь, до выполнения кода в теле. Если при первом обращении к опе- 
ратору \ВПе условие не выполняется, то код не будет выполнен никогда. 


Рассмотрим несколько примеров решения задач, которые мы уже решали ранее 
с использованием операторов цикла юг и \ППе. 
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Пример 
Возведение х в степень у. 


/* Вычисляем х в степени у */ 
маг 2 = х 7 хранит результат 


ГЕ? 


у\ВИе (г <= у) 
Пример 
Вычисление п!. 


/* Вычисляем п! */ 
уаг 7 = 1 // 71 хранит результат п! 


и @>1 { 
ГЕ? 
Чо { 


} 
мийе (1<=п )} 


1.5.8. Выражения с операторами 


Выше неоднократно встречались термины «выражение» и «элементарное выра- 
жение». Вы, должно быть, уже составили себе некоторое представление о том, что 
такое выражение. Тем не менее уточним его. 


Начнем с того, что просто данные (конечные значения) являются выражениями 
языка. Например, число 5.2, одиноко стоящее в строке текста программного кода, 
является выражением. Последовательность символов, заключенная в кавычки 
(например, "Вася"), — тоже выражение. Имя переменной — еще один вариант вы- 
ражения. 


Запись, содержащая имя переменной, за которой следуют символы оператора 
присвоения и некоторое значение (например, х = "Привет всем!"), является выра- 
жением Лауа$сг!ре. Запись, состоящая из операндов и оператора (например, х + 5), 
также является выражением. 


Все перечисленные выше варианты выражения назовем элементарными выраже- 
ниями. Тогда записи, содержащие операторы и операнды в виде элементарных 
выражений, являются выражениями. Например, пусть имеются два элементар- 
ных выражения: х+5 и у-3. Тогда запись х+5 + у-3, объединяющая их оператором 
сложения, является выражением. Это касается не только арифметических опера- 
торов, но и всех других. 


Итак, мы можем писать сложные выражения, в которых операторы различных 
типов могут встречаться несколько раз. Выражение с последовательностью из 
нескольких операторов вычисляется слева направо, но с учетом так называемого 
приоритета операторов. 


1.5. Операторы 47 


ВНИМАНИЕ - 


Среди арифметических операторов наибольшим приоритетом обладают операторы умно- 
жения и деления (в том числе и деления по модулю). Затем следуют сложение и вычита- 
ние. Среди логических операторов наибольшим приоритетом обладает отрицание, затем 
следует логическое И, а дальше — логическое ИЛИ. Операторы сравнения по приоритету 


выше логических операторов. Последовательность операторов с одинаковым приорите- 
том выполняется слева направо. 


Примеры 
+ 3 5 // результат равен 17, а не 25 
2 <3 || 3<1 // результатравен ние 
2 <3 || 3 <1 && азе // результатравен 1гие 
12 <3 | | 3<1 && азе // результатравен {а!зе 


Процессом вычисления выражений можно управлять с помощью круглых ско- 
бок. Каждой открывающейся скобке соответствует своя закрывающаяся скобка, 
так что выражения, заключенные в круглые скобки, могут входить в состав дру- 
гих выражений, которые, в свою очередь, также могут быть заключены в скобки. 
Таким образом, с помощью круглых скобок можно создать иерархическую струк- 
туру выражения, состоящего из других выражений. Первыми выполняются 
выражения, имеющие наибольшую глубину вложенности. Далее выполняются вы- 
ражения, находящиеся на меньшей глубине в иерархии, ит. д. Выражения с оди- 


наковой глубиной вложенности выполняются в порядке, принятом по умолча- 
нию, то есть слева направо. 


ВНИМАНИЕ - 


В выражении с круглыми скобками количество открывающихся скобок должно быть равно 
количеству закрывающихся, а общее количество всех круглых скобок должно быть чет- 
ным числом. Если это не выполняется, то интерпретатор выдает сообщение о синтакси- 
ческой ошибке. Ошибки такого рода часто встречаются при программировании. 


Примеры 
2+ 3.5 // результат равен 17 
(2 +3) *5 // результат равен 25 
((2 +3) + 4*5)/2 // результат равен 12.5 
(2 +3) + 4*5/2 // результат равен 15 
2 + 3+ 4*5/2 // результат равен 15 
(2 +3З+н 4)*5/2 // результат равен 22.5 
2 +» (з + 4*5)/2 Л результат равен 13.5 
(2 + (3+ 4)*5)/2 // результат равен 18.5 


Операторы условного перехода и цикла также представляют собой выражения 
языка ]ЛауаЗспр:. Кроме обычных способов их записи, рассмотренных выше, прин- 


ципиально возможна запись в одну строку. При этом необходимо, чтобы выраже- 
ния в блоках кода разделялись точкой с запятой. 


Пример 
Ш (1х){х = "Вы ничего не ввели"; а1еге (х) }е1зе а!егЁ("Все в порядке”) 


Операторы условного перехода и цикла возвращают значения подобно другим 
операторам, а именно возвращают значение последнего выполненного выражения. 


Сводные сведения о приоритетах всех операторов приведены в разделе 1.10 в конце 
данной главы. 
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1.6. Функции 


Функция представ.ля!;т собой подпрограмму, которую можно вызвать для выпол- 
нения, обратившись к ней по имени. Взаимодействие функции с внешней про- 
граммой, из которой она была вызвана, происходит путем передачи функции па- 
раметров и приема от нее результата вычислений. Впрочем, функция в ЛауаЗсг!ре 
может и не требовать параметров, а также ничего не возвращать. 


В Гауа5сире есть встроенные функции, которые можно использовать в програм- 
мах, но код которых нельзя редактировать или посмотреть. Все, что мы можем 
узнать о них, — это описание ихдействия, параметров и возвращаемого значения. 


Кроме использования встроенных функций вы можете создать свои собственные, 
так называемые пользовательские функции. Часто используемые фрагменты про- 
граммного кода целесообразно оформлять в виде функций. Такой фрагмент кода 
заключается в фигурные скобки, а перед ним пишется ключевое слово Вашсйоп, за 
которым следуют круглые скобки, обрамляющие список параметров. Более по- 
дробно пользовательские функции будут рассмотрены в подразделе 1.6.2. 


Чтобы вызвать функцию в программе, следует написать выражение в следующем 
формате: 

имя функции (параметры) 
Если требуются параметры, то они указываются в круглых скобках через запя- 
тую. Функция может и не иметь параметров. В этом случае в круглых скобках 


ничего не указывается. Подробности использования функций изложены далее 
в этом разделе. 


1.6.1. Встроенные функции 


В Л]ауа5спирЕ имеются нижеследующие встроенные функции (некоторые из них 
мы уже рассматривали ранее). Хотя для иллюстрации работы этих функций при- 
водится множество примеров, желательно выполнить их самим, а также приду- 
мать свои примеры, обращая внимание на крайние (даже абсурдные) случаи. 


(ро!<а, основание) — преобразует указанную строку в целое число в сис- 
теме счисления по указанному основанию (8,10 или 16); если основание не указа- 
но, то предполагается 10, то есть десятеричная система счисления. 

Примеры 
5") // результат = 2 
3 { | ) // результат = -17 
) // результат = 1952 
| О руб.") // результат = 150 
ра цена 150 руб.”) // результат = Мам 
рагзеЕ1оа((сТрОКа, основание) — преобразует указанную строку в число с плаваю- 
щей разделительной (десятичной) точкой в системе счисления по указанному 
основанию (8,10 или 16); если основание не указано, то предполагается 10, то есть 
десятеричная система счисления. 


Примеры 


// результат = 2.5 
// результат = -17.875 
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рагзеРюоа{ (“1952") // результат = 1952 
раге5еЕ1оа\ 50рх”) // результат = 1.5 
рагезеР!оа{("двести") // результат = №мМ 


5МаМ (значение) — возвращает (гие, если указанное в параметре значение не явля- 
ется числом, иначе — #[е. 


Примеры 
15Мам(123) // результат та5е 
1 Мам ("123") // результат тазе 
15МамМ("Теп. 1234567") // результат {гие 
‚Мам ( рх") // результат Чтие 
1эМаМ (гие) // результат фазе 
15МаМ(та!зе) // результат фазе 
15МамМ("Васй") // результат ние 


Перечисленные выше функции мы рассматривали в разделе 1.3, посвященном 
типам данных. 

еуа1(сТроКа)—вычисляетвыражениевуказаннойстроке; выражениедолжнобыть 
написано на языке Лауа5 ст! ре (не содержит тегов НТМГ). 


Примеры 
уагу = 5 // значение у равно 5 
уаг х = "Щу<10) цу = у+2}" // значение х равно строке символов 
еуа[(х) // значение у равно 7 


Другой пример применения функции еуа!Ю можно найти в начале данной главы. 
Это — создание веб-страницы, содержащей текстовое поле для ввода и выполне- 
ния выражений ЛауаЗспре. Вот текст соответствующего НТМТ-кода со сценари- 
ем, содержащим функцию еуа[(): 


<НТМЕ> 

<ТЕХТАВЕА Ш = "тусойе" КОМ\ = 10 С05$ = 60></ТЕХТАВЕА> 

<ТЕХТАВЕА Ш = "тугеги" КО\№ = 3 С0$ = 60></ТЕХТАВЕА> 

«р» 

- <ВУПОМ опсИск ="доситеп.аП.шугеги!{.уа]ше=ета] (тусо4е.уаше)"> 


Выполнить </ВОТТОМ> 
< ВИТГО№ пс ойе ск = "досишепЕ. а]. шусоёе.уа|ие=''; 


ФосишенЕ. а!1. тмугехи!е.уа]ше=''"> 
Очистить</ ВОПОМ > 

<Р> 

</НТМГ> 


Здесь сценарии записаны в виде символьных строк в качестве значений атрибу- 
тов опсИК, определяющих событие щелчок кнопкой мыши на НТМГ-кнопках, ко- 
торые заданы тегами <БиЙоп>. 


езсаре(строКа) — возвращает строку в виде %ХХ, гле ХХ — АЗСП-код указанного 
символа; такую строку еще называют езсаре-последовательностью. 


ипезсаре(строКа) — осуществляет обратное преобразование. 


При взаимодействии браузеров и серверов протоколы передачи данных позволя- 
ют передавать не все символы в их естественном виде. Для передачи остальных 
символов используются их шестнадцатеричные АЗСП-коды, перед которыми ука- 
зывается символ «< %». Например, пробел представляется в езсаре-последователь- 
ности как %20. 
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Примеры 
Ном ао уои 940“) // значение равно "Ном %2040%20уои%204 
езсареС'Привет") /* значение равно 
%и041Е%и0440%10438%и0432%и0435%и0442 */ 
Другие примеры применения функций езсаре() и ипезсареО приведены в разде- 
ле 2.8 (глава 2). 


/ре0!(с'бъект) — возвращает тип указанного объекта в виде символьной строки, ; 
например "Бооеап", "ЕапсНоп" ит. п. 


1.6.2. Пользовательские функции 


Пользовательские функции — это функции, которые вы можете создать сами, по 
своему усмотрению, для решения своих задач. Функция задается своим опреде- 
лением (описанием), которое начинается ключевым словом апсЧоп. Точнее, опи- 
сание функции имеет следующий синтаксис: 

Босб1оп имя_функции (параметры) 

! 

| КОД 

| 
Часто определение функции записывают и в таких формах: 

ТипсНоп имя_функции(параметры) { 

код 
} 


оп имя_функции(параметры) { код } 

Имя функции выбирается также, каки имя переменной. Недопустимо использо- 
вать в качестве имени ключевые слова языка Лауа$спре. За именем функции обя- 
зательно стоит пара круглых скобок. Программный код (тело) функции заключа- 
ется в фигурные скобки. Они определяют группу выражений, которые относятся 
к коду именно этой функции. Если функция принимает параметры, то список их 
имен (идентификаторов) указывается в круглых скобках около имени функции. 
Имена параметров выбираются согласно тем же требованиям, что и имена обыч- 
ных переменных. Если параметров несколько, то в списке они разделяются запя- 
тыми. Если параметры для данной функции не предусмотрены, то в круглых скоб- 
ках около имени функции ничего не пишут. 


Когда создается определение функции, список ее параметров (если он необхо- 
дим) содержит просто формальные идентификаторы (имена) этих параметров, 
понимаемые как переменные. В определении функции в списке параметров, за- 
ключенном в круглые скобки сразу же за именем функции после ключевого слова 
РапсНоп, нельзя использовать конкретные значения и выражения. В этом смысле 
определение функции задает код, оперирующий формальными параметрами, ко- 
торые конкретизируются лишь при вызове функции из внешней программы. 


Если требуется, чтобы функция возврашала некоторое значение, то в ее теле ис- 
пользуется оператор возврата гегагп с указанием справа от него того, что следует 
возвратить. В качестве возвращаемой величины может выступать любое выраже- 
ние: простое значение, имя переменной или вычисляемое выражение. Оператор 
гегаги может встречаться в коде функции несколько раз. Впрочем, возвращаемую 
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величину, а также сам оператор геГаги можно и не указывать. В этом случае функ- 
ция ничего не будет возвращать. 


Пример 

Допустим, требуется определить функцию для вычисления площади прямоуголь- 
ника (для этого необходимо умножить ширину на высоту). Назовем эту функцию 
Згесап?е. Тогда ее определение будет выглядеть следующим образом: 


ТипсНоп Эгецапо!е(ммаН, пегап\){ 

$ = май * педм 

гетигп 5 

} 
Здесь сначала вычисляется площадь путем умножения значений параметров \1а 
и Ве1>0*, полученное значение присваивается переменной $,азатем оператор геиги 
возвращает значение этой переменной. 


Определение функции Эгес{ап?е можно сделать более экономным, минуя при- 
своение значения переменной 5: 

КюпсНоп Эгефапа!е(ммат, веоп){ 

гефигп мои * пед 

} 
Определение функции, описанное выше, будучи помещенным в программу, усва- 
ивается интерпретатором, но сама функция (ее код или тело) не выполняется. 
Чтобы выполнить функцию, определение которой задано, необходимо написать 
в программе выражение вызова этой функции. Оно имеет следующий синтаксис: 

имя_функции (параметры) 
Имя функции должно полностью (вплоть до регистра) совпадать с именем ранее 
определенной функции. Параметры, если они заданы в определении функции, 
в вызове функции представляются конкретными значениями, Переменными или 
выражениями. 


ВНИМАНИЕ - ^^ — РР ЕЕ НЕЕНИН 


Не путайте определение функции с ее вызовом, хотя и то и другое могут находиться в од- 
ной и той же программе. 


В Лауазсир( можно не поддерживать равенство между количествами параметров 
в определении функции и в ее вызове. Если в функции определены, например, 
три параметра, а в вызове указаны только два, то последнему параметру будет 
автоматически присвоено значение пи|. Наоборот, лишние параметры в вызове 
функции будут просто проигнорированы. 


Выше мы рассмотрели пример определения функции ЭгебапеО, вычисляющей 
площадь прямоугольника, если заданы его ширина и высота. Чтобы вычислить 
значение площади прямоугольника при конкретных значениях параметров, в про- 
грамме необходимо написать выражение вызова функции ЭгесфапеО, указав 
в качестве ее параметров конкретные значения, либо переменные с конкретными 
значениями, либо выражения, вычисляющие значения. 

Примеры 

$гесфапе1е(3, 5) /^ возвращает площадь прямоугольника 
размером 3х5 */ 
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бгесхапЕ\е(3, 4 + 2 /* возвращает площадь прямоугольника? 
размером 3х6 */ 


Безье = 8 

гестапр\е (3 :) /* возвращает площадь прямоуго!г 
размером 3х8 */ 

уай=4 

педы=5 


Эгесцап е (14, Верь + 2) /* возвращает плошадь прямоуго’льни! 
размером 4х7 */ 
Згес‘ап21е(2) /* возвращает 0 (второй параметр 
не задан) */ 
Внутри тела функции можно создавать переменные, либо просто с помощью опе- 
ратора присвоения, либо с помощью ключевого слова уаг. При этом возникает во- 
прос об области действия переменных. 


Если вы используете просто оператор присвоения, то возможны две ситуации. 


1. Переменная в операторе присвоения встречается первый раз в вашей программе 
именно в теле функции. В этом случае она действует в пределах кода (тела) 
этой функции, но после выполнения функции эта переменная продолжает су- 
ществовать и во внешней программе. Таким образом, эта переменная является 
глобальной. 


2. Переменная в операторе присв‹°ения уже определена во внелиией программе. 
В этом случае она и действует внутри функции, и продолжает существовать 
после завершения ее выполнения, поскольку она была создана во внешней 
программе как глобальная переменная. 


Если в теле функции вы используете ключевое слово уаг для инициализации пе- 
ременной, то эта переменная будет действовать только в пределах кода функции, 
независимо от того, была ли она определена во внешней программе или нет. При 
этом если переменная создана с ключевым словом уаг впервые в теле функции, то 
она является локальной, то есть недоступной из внешней программы. Таким об- 
разом, инициализация переменной с помощью выражения с ключевым словом уаг 
создает локальную переменную. 


Если в теле функции вы используете переменную, определенную только во внеш- 
ней программе, то изменение ее значения в теле функции сохранится даже после 
завершения выполнения этой функции, поскольку это глобальная переменная. 


Если во внешней программе вы определили некоторые переменные, имена кото- 
рых совпадают с формальными параметрами в определении функции, а затем 
указываете их в качестве параметров вызова этой функции, то произойдет следу- 
ющее. Функция воспримет значения параметров, определенные во внешней про- 
грамме, однако любые их изменения в теле функции останутся локальными, то 
есть после завершения работы кода функции значения указанных переменных 
останутся прежними, как до вызова функции. 


Рассмотрим типичные ситуации, связанные с областью действия переменных, на 
следующих примерах. 


Примеры 


1. Переменная $ определена только в теле функции, но продолжает существо- 
вать во внешней программе: 


1.6. Функции 53 


ТипсНоп Эгесфапо[е (миа, Пегап+){ 
5 = ман * веды 
гефигп 5 


у 


2 = Эгесапоа!е(2,, 3) /* значения и ри $ равны 6; 
$ - глобальная переменная */ 


2. Переменная 5 определена во внешней программе, но используется в теле функ- 
ЦИИ: 
ТипсНоп Эгецапо!е (маи, пегопу){ 
$ = май * пеюм 
гефигп 5 


} 


7 


2 
Эгесвапе(2,?, 3) /* значение 7 равно 6, 
а значение 5 осталось равным 2, 
то есть значению глобальной переменной; 
определенной во внешней программе */ 
3. То же, что и в примере 2, но с использованием ключевого слова уап 
ГапсНоп Эгесбап?е(уа, Ве121е){ 
уаг 5 = У! * Ве 
теги 5 
| 
уаг $ =2 
2 = Эгесбап ]е(2, 3) /* значение 7 равно 6, 
а значение $3 осталось равным 2, 
то есть значению глобальной переменной, 
определенной во внешней программе */ 
4. Исключительно локальные переменные: 


РАпсйоп Згесбапе(м1д®, пВе1510)}{ 

уаг $ = ма * вещ 

уаг х =17 

гегагп 5 

} 

2 = отесбап]е(2,3), 3) /* значение 7 равно 6; 
переменная 5 во внешней программе 
не определена; 
переменная х во внешней программе 
не определена */ 


5. Имена параметров в определении функции совпадают с именами параметров 
во внешней программе и с параметрами в вызове функции: 


Кипсбоп Эгефапа!е(ммай, пегоап® { 
уаг $ = мон * веон 


Мио = мон + 10 // изменяем значение параметра мл {И 
гетигп $ 

| 

мИОИ = 2 

нед = 3 


2 = Згесапа!е(ма{и, песо) /* значение 7 равно 6; 
значение переменной мм равно 2, 
то есть осталось без изменений */ 
Программа может содержать и определение функции, и выражения ее вызова. При 
этом порядок их следования в программе не важен: вы можете сначала написать 
определение функции, а затем где-нибудь в программе написать ее вызов, или, 
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наоборот, написать сначала вызов функции, а ее определение разместить где-ни- 
будь в конце программы или даже в отдельном файле с расширением у>. В приве- 
денных выше примерах мы записывали определение функции до ее вызова, одна- 
ко программисты чаще поступают наоборот. 


Пример 
Функция вычисления факториала п, с помощью оператора цикла. 


В предыдущем разделе, посвященном операторам цикла, мы рассматривали про- 
граммный код вычисления факториала числа п. Напомним, что факториал целого 
положительного числа п в математике обозначают как п! и вычисляют по форму- 
ле: #23" 3*..*п,если п<=1. Для п=0 и п=1 п!=1. В этом примере программу вычисле- 
ния п! мы оформим в виде функции: 

ГипсИоп  Гасбог1а1(п){ 

Ша <= 1) тет 1 


гея = // гезаЙ - переменная для результата 
Юг (1 = 3; 1< = п; 1+ +) { 

тета = ге 
} 


гегигпи гезаЙ 


Для вычисления факториала конкретного числа, например 12, следует записать 
выражение сф®опа(12). 


Если в нашей программе определена описанная выше функция Нс®юпаЮ,то в этой 
же программе возможен такой фрагмент, содержащий вызов этой функции: 

маг т = 10 

х = Фацопа(т) // значение х равно 3628809° 
Определение функции может содержать вызов этой же функции — так называе- 
мое рекурсивное определение функции. В качестве примера рекурсивной функ- 
ции в учебной литературе обычно приводят функцию вычисления факториала. 


Пример 
Функция вычисления факториала п! с помощью рекурсии. 


ТипсНоп Тасота!(п) { 
Н(п <= 1){ 
геигп 1 


гетигп г’ ] // вызов функции Тасфогга[() 

} 
Отметим, что определение этой функции можно записать более компактно, опус- 
тив пару фигурных скобок, поскольку заключенный в них блок кода содержит 
лишь одно выражение: 

лен ой  Гасбог!а! (п) { 

НО <= 0 тешш 1 

геигпт  п*Расфог!а| (п-1) // вызов функции Тасфог!а! О 


СОВЕТ 


Чтобы избежать ошибок, старайтесь не использовать в коде функций имена переменных, 
инициализированных во внешней программе. По возможности стремитесь к тому, чтобы 
все, что делается внутри вашей функции, было локальным, формально независимым от 
внешнего окружения. 
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Определение функции может содержать в себе определения других функций, од- 
нако такие вложенные функции доступны только из кода функции, содержащей 
их определения. 


Определение функции создает так называемый экземпляр объекта Еипс Чоп, об- 
ладающий полезными свойствами и методами. В частности, он имеет свойство 
агхитеп{5, содержащее информацию о параметрах, которые действительно были 
переданы функции при ее вызове. В некоторых случаях, прежде чем выполнить 
выражения тела функции, требуется проанализировать значения параметров. 
И тогда понадобится использовать свойство аггитеп{$. Подробности описаны 
ниже, в подразделе 1.7.7. 


1.6.3. Выражения с функциями 


Выше мы рассматривали, что такое выражения с операторами. Ко множеству эле- 
ментарных выражений ЛауаЗспр* можно добавить еще и вызовы функций. Тогда 
вызов функции может быть правой частью оператора присвоения, а также состав- 
ной частью любого выражения с операторами. 


Примеры 
1. Пусть Эгебапе(\м@®, Ве126{) — функция, возвращающая значение площади 
прямоугольника со сторонами \1АВ и Ве! 1. Тогда для вычисления площади 


прямоугольного треугольника с катетами а и Ъ можно использовать следую- 
щее выражение: 

$3 = 0.5* бгемапе(а, 5) 
В этом примере вызов функции является операндом выражения с арифме- 
тическим оператором умножения. При этом значение выражения присваивает- 
ся переменной 53. 


2. Вызов функции может использоваться в логических выражениях: 


Ш (Згесапе(а, 5) > Эгемапе(с, а) 
а1ег(("Первый прямоугольник болыпе второго") 


3. В качестве параметра функции может указываться вызов другой функции: 


"эс , 
рх 


маг х = "2 
уаг у = 12 
уаг 5 = Эгецапе]е (рагзе!и (х) , у) 


В выражениях с вызовами функций последние имеют наивысший приоритет. 


1.7. Встроенные объекты 


Объекты представляют собой программные единицы, обладающие некоторыми 
свойствами. Об объекте мы можем судить по значениям его свойств и описанию 
того, как он функционирует. Программный код встроенных в ]ауаЗспирЕ объектов 
нам недоступен. Главное для нас сейчас — усвоить, как пользоваться объектами. 
Это совсем просто, нужно только соблюдать нехитрый синтаксис. Использовать 
объекты не труднее, чем функции. Управление веб-страницами с помощью 
сценариев, написанных на Лауазсг!ре, заключается в использовании и изменении 
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свойств объектов НТМГ-документа и самого браузера. Эти вопросы мы отложим 
до следующих глав. 


Встроенные объекты имеют фиксированные названия и свойства. Все свойства 
этих объектов разделяют на два вида: просто свойства и методы. Свойства анало- 
гичны обычным переменным. Они имеют имена и значения. Некоторые свойства 
объектов доступны только для чтения. Это означает, что их значения нельзя из- 
менять. Другие свойства доступны и для записи — их значения можно изменять 
с помощью оператора присвоения. Методы аналогичны функциям, они могут 
иметь параметры или не иметь их. 


Чтобы узнать значение свойства объекта, необходимо указать имя этого объекта 
и имя свойства, отделив их друг от друга точкой: им?! ‘збъекта.свойство. Заметим, 
что объект может и не иметь свойств. 


Мы можем заставить объект выполнить тот или иной присущий ему метод. В этом 
случае также говорят о применении метода к объекту. Синтаксис соответствую- 
щего выражения такой: имя_объекта.метод(параметры). Заметим, что объект может 
не иметь методов. 


Итак, по синтаксису свойства отличаются от обычных переменных тем, что име- 
ют составные имена, а также тем, что значения некоторых свойств нельзя измене- 
нить. Методы отличаются с точки зрения синтаксиса от обычных функций толь- 
ко тем, что имеют составные имена. 


В свете изложенного выше объект можно понимать как некоторый контейнер, 
содержащий переменные-свойства и функции-методы. Разумеется, в этом кон- 
тейнере есть еще что-то, но оно скрыто от нас. Мы можем воздействовать на объ- 
ект только с помощью свойств и методов. В популярных книгах часто сравнивают 
объект с черным ящиком, у которого есть входы и выходы, доступные для наблю- 
дения и, возможно, для управления. Я не буду развивать эту аналогию, поскольку 
для новичков, не обремененных традициями программирования без объектов, 
понять, что такое объекты и как ими пользоваться, не составляет особого труда. 
Для них понятия объекта и функции являются понятиями примерно одинаковой 
сложности. При этом сложность легко преодолима, было бы желание. 


В Лауа5сире математические вычисления, сложная обработка строк и дат, а также 
создание массивов производятся с помощью соответствующих встроенных объ- 
ектов. Для разработчиков веб-сайтов особенно важны объекты Зе (обработка 
строк), Алау (массивы), Май (математические формулы и константы) и Оже (ра- 
бота с датами). Обратите на них особое внимание. 


Встроенные объекты, как уже отмечалось, имеют фиксированные названия. Объек- 
ты с именами, совпадающими с ихфиксированными названиями, называются ста- 
тическими. Однако вы можете создать экземпляры (копии) статических объек- 
тов, присвоив им свои собственные имена. Экземпляры статических объектов 
являются объектами в вашей программе, которые наследуют от первых все их свой- 
ства и методы. Экземпляры объектов — это некоторые частные воплощения в про- 
грамме соответствующих статических объектов. Вместе с тем вы можете исполь- 
зовать и статические объекты в чистом виде, не создавая никаких их копий. 
Например, для формульных вычислений используется статический объект Ма"в, 
а в случае массивов создаются экземпляры статического объекта Аггау, содержа- 
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щие конкретные данные, к которым применимы все общие методы и свойства ста- 
тического объекта Апау. 


Встроенные объекты имеют, среди прочих, свойство ргобофуре (прототип), с по- 
мощью которого можно добавлять новые свойства и методы к уже существую- 
щим экземплярам объектов. Эти новые свойства и методы, разумеется, вы долж- 
ны предварительно сами продумать и воплотить в виде программных кодов. Ниже 
мы покажем, как это делается. Например, при желании вы можете создать свой 
собственный метод обработки строк или массивов и присоединить их к конкрет- 
ным объектам, чтобы затем использовать также, как и встроенные свойства и ме- 
тоды. При разработке сценариев для веб-страниц такая задача редко возникает, 
но Лауабсийр" предназначен не только для создания сценариев. 


1.7.1. Объект Зита (Строка) 


Объект Эштз представляет интерес главным образом благодаря методам обработки 
строк. Он незаменим, когда требуется, например, найти позицию вхождения од- 
ной строки в другую, вырезать из строки некоторую ее часть, разбить строку на 
отдельные элементы и создать из них массив ит. д. 


С помощью объекта Зи ште можно создать строку как строковый объект. Однако 
в подавляющем большинстве случаев для этого достаточно использовать обыч- 
ную переменную и оператор присвоения строкового значения. В этом случае ин- 
терпретатор все равно создает экземпляр (копию) строкового объекта, свойства 
и методы которого доступны из программного кода. 


Создание строкового объекта 


Для создания строкового объекта используется выражение следующего вида: 
имя_переменной = пем З1{и!тд("строковое_значение" } 

Здесь имя переменной выполняет роль ссылки на строковый объект. Например, 

выражение тузише = пе\м 5Ыпд("Привет!") создает строковый объект шузише со 

значением "Привет!". 


Однако можно создать строковый объект и с помощью обычного оператора при- 
своения: 

имя переменной = "строковое_ значение" 
или 

уаг имя переменной = "строковое_значение" 
Доступ к свойствам и методам строкового объекта обеспечивается такими выра- 
жениями: 


строка.свойство 
9Ег119.СсвойЙство 


строка .метод ( [параметры] ) 

5Ех1п9.метод( [параметры] ) 
Некоторые методы могут и не иметь параметров, что указано с помощью квадрат-_ 
ных скобок. Здесь строка может быть ссылкой на строковый объект, строковой 
переменной, выражением, возвращающим строку, а также просто строковым зна- 
чением. 
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Когда используется ключевое слово Эгш® в качестве имени объекта, это означает, 
что нас интересуют свойства и методы статического строкового объекта, то есть 
общие свойства и методы, не связанные, вообще говоря, с конкретными свойства- 
ми и методами конкретного строкового объекта (экземпляра объекта Э11®). 


Ниже приведены три различных способа использования свойства еп? строко- 
вого объекта, значением которого является длина строки (количество символов 
в строке). 


туз па = "Однажды в студеную зимнюю пору” 
тузЕг1 пд. 1еп8тн // значение равно 30 
"Однажды в студеную зимнюю пору".|1епо{И // значение равно 30 


фипсЕ1оп Т54г1пЕ() (гетигп "абсае"} /* функция, возвращающая 
строку “абсае" */ 
1511190 .1епо{Н //значение равно 5 
Методы строкового объекта используются для синтаксической обработки и фор- 
матирования строк. Эти две группы методов мы рассмотрим отдельно. 


Свойства 51пд 


1еп{ — длина или, иными словами, количество символов (включая пробелы) 
в строке; целое число. 


Пример 

"Иван". 1епё\ // значение равно 4 

"ПриветХпвсем". 1епо{п /* значение равно 11 

(\п - один символ перевода строки) */ 

х =" // пустая строка 

х. 1еп8еп // значение равно 0 (пустая строка имеет длину 0) 
ргофофуре — свойство (прототип), позволяющее добавить новые свойства и мето- 
ды ко всем создаваемым строковым объектам, если уже существующих вам ока- 


жется недостаточно. 

Пример 

В приведенном ниже примере мы создаем новый метод для всех строковых объ- 
ектов. Содержание этого метода определяется пользовательской функцией. 


ипсНоп — пуисо { // функция для нового метода 
гефигп "Вадим” 
| 

// Добавление нового метода пу\№ате к прототипу: 
$4гт9д .ргототуре.туМатеО = туРипс 
туз = "Автор этой книги - " + "Дунаев "ллуМатеО 

/* значение туз 

равно "Автор этой книги - Дунаев Вадим" */ 


Методы 5птда обработки строк 


1. сПагАКоН&еКс) — возвращает символ, занимающий в строке указанную пози- 
ЦИЮ. 
Синтаксис: строка.с1пагА1 (индекс) 
Возвращает односимвольную или пустую строку. 


Параметр (индекс) является числом, индекс первого символа равен 0. 
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2. 


3. 


4. 


Примеры 


‚ивет ПагА{ (2) // значение равно "и" 
// значение равно " 


ривет 1агАТ (15) 
пуз6г1п9 = "Привет" 
тузгште.сПагАт (туз г1т$.1еп21-1) /* значение последнего символа 

равно “т */ 


спагСодеАК[МН®еК‹]) — преобразует символ в указанной позиции строки в его 
числовой эквивалент (код). 


Синтаксис: строка. сИагСойеАЩинлдекс]) 
Возвращает число. 


1Е4+ и №№ поддерживают систему кодов Ошсоае ‚ ММ4 — 1$О0-Гайп 1. 


Примеры 
с". сНагСодедю // значение равно 97 
"”. спагСо4едЖ) // значение равно 98 
"абс" . сНагСодеАК25) // значение равно М№мМ 
„"”_. спагСо4едЕ 65 › // значение равно Мам 
"я". снагСодедАКо) // значение равно 1103 


ПотСвагСоае(НОМер! |, номер? |, ... номерМ]]) — возвращает строку символов, 

числовые коды которой указаны в качестве параметров. 

Синтаксис: Эште.ботСрагСоде(НОМер! [, номер? [,... номерМ]]) 

Возвращает строку. 

1Е4-+ и №№ поддерживают систему кодов Чсо4де, М№М4 — 1$О-Гаийп 1. 

Пример 
ЕГ1П8. 1 ПагСоде (9 11 // значение равно "аБю" 

сопса(сгроКа) — конкатенация (склейка) строк. 

Синтаксис: строка!., опса1(строка2) 

Возвращает строку. 

Этот метод действует так же, как и оператор 4-> сложения для строк: к строке 

строка! приписывается справастрока2. 

Примеры 


Иван". сопса*{ ("Иванов") // значение равно “ИванИванов" 
х = "Федор" + " // значение х равно "Федор " 

х. сопса! ( "Иванов // значение равно “Федор Иванов" 

1 дехОКсТроКа поМСКа |[, индекс]) — производит поиск строки, указанной пара- 
метром, и возвращает индекс ее первого вхождения. 


Синтаксис: строка.1пс1ехОт(строка_поиска [, индекс]) 
Возвращает число. 


Метод производит поиск позиции первого вхождения строка _поиска в строку 
строка. Возвращаемое число (индекс вхождения) отсчитывается от 0. Если по- 
иск не удачен, то возвращается -1. Поиск в пустой строке всегда возвращает -1. 
Поиск пустой строки всегда возвращает 0. 


Второй параметр, неявляющийся обязательным, указывает индекс, с которого 
следует начать поиск. 
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Этот метод хорошо использовать вместе с методом выделения подстроки $16$г() 
(см. ниже), когда требуется сначала определить позиции начала и конца выде- 
ляемой подстроки. Рассматриваемый здесь метод подходит для определения 
начальной позиции. 

Примеры 

х ="Во первых строках своего письма" 


перв+ 


//значение равно 3 


паехОК"первых строках“) //значение равно 3 
х.паехо{"вторых строках”) //значение равно -1 
Чех0+ ("В") //значение равно 0 
х.паехО: ("в") //значение равно 6 
х.паехо{("в", 7) //значение равно 19 
х. 1п4ех01 //значение равно 2 

‚ 5) //значение равно 9 


1пдехот ("") //значение равно 0 
ТазбидехОКсТроКа_поНСКа |[, индекс]) — производит поиск строки, указанной па- 
раметром, и возвращает индекс ее первого вхождения; при этом поиск начина- 
ется с конца исходной строки, но возвращаемый индекс отсчитывается от ее 
начала, то есть от 0. 


Синтаксис: строка.ЁазНпаехОКсгроКа_поМСКа [, индекс]) 


Возвращает число. Метод аналогичен рассмотренному выше шдехОЮ и отли- 
чается лишь направлением поиска. 
Примеры 

х ="Во первых строках своего письма“ 


1а5+1пдехо+ ("перв! 


// значение равно 3 

|а5{1пдехО: ("а // значение равно 30 

пдех0? ("а // значение равно 15 
Лоса1еСотраге(строка) — позволяет сравнивать строки в кодировке Оп1соде, то 
есть с учетом используемого браузером языка общения с пользователем. 


Синтаксис: строка!.1оса1еСотраге(строка2) 
Возвращает число. Совместимость: 1Е5.5+, ММб+. 


Если сравниваемые строки одинаковы, метод возвращает 0. Если строка! мень- 
ше, чем строка2, то возвращается отрицательное число, в противном случае - 
положительное. Сравнение строк происходит путем сравнения сумм кодов их 
символов. Абсолютное значение возвращаемого числа зависит от браузера. Так, 
1Е5.5 и [Еб.0 возвращают 1 или -1, а М№б — разность сумм кодов в кодировке 
Осо4е. 


зИ е(индекс1 [‚индекс2]), —возвращает подстроку исходной строки, начальный 
и конечный индексы которой указываются параметрами, за исключением по- 
следнего символа. 


Синтаксис: строка.$Нсе(индекс1 [, индекс?2]) 
Возвращает строку. Данный метод не изменяет исходную строку. 


Если второй параметр не указан, то возвращается подстрока с начальной пози- 
цией индекс! и до конца строки. Отсчет позиций начинается с начала строки. 
Первый символ строки имеет индекс 0. Если второй параметр указан, то воз- 
вращается подстрока исходной строки начиная с позиции индекс! идо позиции 
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10. 


индекс2, исключая последний символ. Если второй параметр отрицателен, то 
отсчет конечного индекса производится от конца строки. В этом заключается 
основное отличие метода $Псе() от зи65г(). Сравните также этот метод с мето- 
дом 51651150. 


Примеры 


х = "Вю первых строках своего письма" 
1се // значение равно "первы" 
// значение равно "первых строках своего пись" 


/* Анализ адреса электронной почты */ 


х = "мити$зегазйиа.ги" 

| = х. шаехОТ ("@") // значение равно 4 

_пате = х.5Нсе(0, 1) // значение равно “тити" 

_дотеп = х.$Исе(1+1, х. тадехОЕ (".")) // Значение равно "дегазйт" 
пей = х.$1с(е(1+1, -3) // значение равно"дегазит" 


зрШразделитель |, ограничитель]) — возвращает массив элементов, полученных 
из исходной строки. 


Синтаксис: строка.зр разделитель |, ограничитель]) 
Возвращает массив. 


Первый параметр является строкой символов, используемой в качестве разде- 
лителя строки на элементы. Второй необязательный параметр — число, указы- 
вающее, сколько элементов строки, полученной при разделелении, следует 
включить в возвращаемый массив. 


Если разделитель — пустая строка, то возвращается массив символов строки. 


Примеры 
х = "Привет всем“ 
х.$р114 * значение - массив из элементов: "Привет", "всем" */ 
рт 1 /* значение - массив из элементов: "Прив", "т вс", "м" */ 
р111 ‚} /* значение - массив из элементов: "Прив", "т вс" */ 
зибзн(иНЯекс |[, длина|) — возвращает подстроку исходной строки, начальный 


индекс и длина которой указываются параметрами. 
Синтаксис: строка.зиб$(пНЯеКс [, длина]) 
Возвращает строку. Данный метод не изменяет исходную строку. 


Если второй параметр не указан, то возвращается подстрока с начальной пози- 
цией индекс! и до конца строки. Отсчет позиций начинается с начала строки. 
Первый символ строки имеет индекс 0. Если второй параметр указан, то воз- 
вращается подстрока исходной строки начиная с позиции индекс 1 ис общим 
количеством символов, равным длина. Сравните этот метод с методами $НсеО 
и $16$1120. 
Примеры 

х = "Привет всем“ 

| 1) // значение равно "всем" 


/* Анализ адреса электронной почты */ 


х = "тита@регазйи.ги" 
{ = хидехО"@") // значение равно 4 


_патше = х.5$и6$1г(0, 1) // значение равно "тити" 
{ + // значение равно "зегаз1т.га" 
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11. 


12. 


13. 


$9650112(МНеКа, индекс2) — возвращает подстроку исходной строки, началь- 
ный и конечный индексы которой указываются параметрами. 


Синтаксис: СТроКа.забзште(МНЯекС, индекс?) 

Возвращает строку. Данный метод не изменяет исходную строку. 

Порядок индексов не важен: наименьший из них считается начальным. Отсчет 
позиций начинается с начала строки. Первый символ строки имеет индекс 0. 


Символ, соответствующий конечному индексу, не включается в возвращаемую 
строку. Сравните этот метод с методами $1650 и $Псе0. 


Примеры 

х = "Привет всем" 

х.5и65119(0`, 6) // значение равно “Привет” 
х. зир$Нта(7, х. епда1И) // значение равно "всем" 
х. зиб$Н119(7, 250) // значение равно "всем" 
х.зиб$Нтоа(250, 7) // значение равно "всем" 


{оГоса!еГ.о\уегСазеО 1оГо\егСазе() —переводят строку в нижний регистр. 
Синтаксис: сТрОКаюГосаеТ о\егСазеО, СТроКалюГо\егСазе О 

Возвращают строку. Первый метод работает в 1Е5.5+, М№ММ№6, учитывает опреде- 
ленные языковые системы. 

Приведение строк к одному и тому же регистру требуется, например, при срав- 
нении содержимого строк без учета регистра. Кроме того, многие серверы чув- 
ствительны к регистру, в котором определены имена файлов и папки (обычно 
требуется, чтобы они были определены в нижнем регистре). 


во 
"ЗдраВствуйТе” 
{оГоса\еГомегСазе ( // значение равно “здравствуйте” 
х. тоГоммегСазе() // значение равно “здравствуйте“ 
у = "Здравствуйте" 
х == у // значение равно Та!зе 
х. +0|_омгегСазе() == у . +оЁомегСазе // значение равно ие 


{оГоса!еПррегСазеО, о ЧррегСазе() — переводят строку в верхний регистр. 
Синтаксис: СТроКалюГосаеОррегСазеО, строКа4оОррегСазе() 

Возвращают строку. 

Первый метод работает в 1Е5.5+, М№ММ№ 6, учитывает определенные языковые сис- 
темы. 

Приведение строк к одному и тому же регистру требуется, например, при срав- 
нении содержимого строк без учета регистра. Кроме того, многие серверы чув- 
ствительны к регистру, в котором определены имена файлов и папки. 


Примеры 

х = "ЗдраВствуйТе" 

х. фоГосаеОррегСа$е() // значение равно "ЗДРАВСТВУЙТЕ" 
: уррег-аз // значение равно "ЗДРАВСТВУЙТЕ" 
у = а ` 

х == // значение равно Ёа15е 


х. чо рренСаве = у. юИррегСазе // значение равно {гие 
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Методы 5{птд форматирования строк 


Как известно, тексты на веб-страницах обычно создаются и форматируются с по- 
мощью тегов НТМГ. Однако тексты можно создавать на веб-страницах и с по- 
мощьюсценариев. Например, чтобывывестинавеб-страницу строку "Приветвсем!" 
полужирным шрифтом, в НТМ!Г-коде следует написать следующую инструкцию: 


<В>Привет всем!</В> 
Чтобы подготовить эту же строку в таком же формате средствами ЛауазЗспире, 
в сценарии следует написать такое выражение: 

"Приветвсем!".6014() 
Здесь использован метод оО строкового объекта для форматирования строк. 
Выполнение этого выражения лишь создает отформатированную строку, но не 
выводит ее в окно браузера. Чтобы сделать это, следует еще выполнить метод \тйе() 
объекта Чоситеп" для записи этой строки в НТМГ-документ. Ниже приведен при- 
мер кода и вид НТМГ-документа в окне браузера (рис. 1.11). 

<НТМЬ> 

<ЗСВТРТ> 

х = "Поивет всем! ".Ъо1а() 

аосчтепЕ.иг1 се(х) 

</5СВРТ> 


<Р>Приветствие было вставлено сценарием Л ауазсг! ре 
</НТМ!> 


*ЦСЛМоидокумекты\примеры.Ыт - Миозовтете х Е 
Файл: Правка Вид Избранное Сервис Справка | № | 


Эа (МВ 9! 2; 8 м] ” | Адрес 


Привет всем! 


Приветствие было вставлено сценарием УауаЗспрё 


Готово © Мой коальютер 


= вари 


Рис. 1.11. Приветствие в верхней строке сформировано сценарием 


В рассмотренном выше примере использован объект досите!и и его метод \гИе0. 
Другие свойства и методы этого объекта рассматриваются в следующих главах. 


Методы форматирования строк носят названия, соответствующие тегам НТМГ. 
Их особенность в том, что, в отличие от тегов, их следует записывать только в ниж- 
нем регистре (строчными буквами). Синтаксис такой же, как и у ранее рассмот- 
ренных методов: 

строка .метод (параметр) 
Большинство методов форматирования не имеют параметров. Далее приведен их 
список. 
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зпспог("“апсВог_ имя”) Ип1<(расположение или ЦУВИ 


пк) 19() 
Боа0 зтак() 
Пхе4() зеке() 
опсоог(ЗНа4еНпе | |ВетТа) зи6() 
юпте(4МОГо от 1 до 7) 1р() 
Найс$@ 
Примеры 

"Глава 2". апспог("мо!ите?2") /* эквивалентно НТМЁ-коду: 


<А МАМЕ="Уо!ите2">гпаеа 2</А> */ 
"Страница автора“. ПИпК("В р: /ммм.адапига!.ги/-Чипаем”") 
/* эквивалентно НТМ!-коду: 
<А НВЕР = "Пр: /м/мм.адат!га1.ги/-Чипаем")>Страница автора</А> */ 


Функции вставки и замены подстрок 


При обработке строк часто требуется вставить или заменить подстроки. Удале- 
ние подстроки из данной строки можно рассматривать как частный случай заме- 
ны, а именно замены указанной подстроки пустой строкой. С помощью методов 
объекта Зи можно написать программу для решения этой задачи. Поскольку 
она часто встречается, то целесообразно оформить программу в виде функций. 


Рассмотрим сначала функцию вставки строки в исходную строку. Назовем ее, 
например, 1155г. Данная функция должна принимать три параметра: исходную 
строку $1,, вставляемую строку $2 и индекс позиции вставки п. Ниже приведены 
ее определение и примеры вызова: 


ТипсНоп 1п$$41($1,$2,п) { 
гефигп $1.5Исе(О.п) + $2 + $1.$Исе(п) 


} 


$5 ("Привет., друзья”, “ моим", 7) // “Привет, мои друзья“ 
| | т, друзья", "” мои", 100) // "Привет, друзья моим" 
Теперь займемся функцией, которая заменяет в исходной строке все вхождения 
заданной подстроки на подстроку замены. Назовем эту функцию герасеяг. Она 
должна принимать три параметра: исходную строку $1, заменяемую подстроку $2 
и подстроку $3, которой следует заменить все вхождения $2 в Я (52 может встре- 
чаться в $1 несколько раз). 


Очевидно, прежде всего необходимо найти все вхождения $52 в $1. Если исходная 
строка не содержит в себе подстрок 52, то функция должна вернуть исходную под- 
строку без всяких изменений. В противном случае требуется изъять из <.1 все вхож- 
дения $2, а на их место вставить подстроку $3. Полученная таким образом строка 
должна возвращаться функцией в качестве результата. Ниже приведено опреде- 
ление функции для замены подстрок и два примера ее вызова: 


Гапсиоп гер!асе$г ($1, $2, 53) { 


уаг $ = " // обработанная часть строки 
Уве (гие) { 
1 = $ ш4ехО! ($2) // индекс вхождения $2 в Я 
а >жо{ 
3 = © + 81.5636: (0, 1) + $53 // обработанная часть строки 
1 1 + 32.1епаев) // оставшаяся часть строки 


}е1зе ргеак 
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геиги $ + 5х 


гер!асез1г С'Басдае", "а", "Х") // "БХсахе" 


х = "Иван Иванов" 

гер1асезтг(х, "Иван", "Федор") // “Федор Федоров" 
Заметим, что если заменяемая подстрока $2 является пустой, то цикл будет про- 
должаться бесконечно, поскольку пустая строка входит в состав любой строки. 
Чтобы избежать зацикливания, следует немного изменить код тела функции. Но 
что должна возвращать наша функция, если $2 — пустая строка? Вы можете ре- 
шить, что в этом случае следует просто вернуть исходную строку $ или же, на- 
пример, считать пустую строку строкой, содержащей пробел. Последний вариант 
представляется мне более интересным. Вот код, реализующий эту идею: 


ГапсНоп гер!асе$г($1, $2, 53) { 


18 (52 = "") 
$ =" ' // заменяем пустую строку на строку с пробелом 
уаг $ = " // обработанная часть строки 


УВПе (гие) 
1 = $1. ШдехОЕ ($2) // индекс вхождения $2 в 9 


а 2жО { 
$ = 5+ $1.5405%г(0, 1) + 53 // обработанная часть строки 
$1. = $1. 5 1056г (1+ $2. [еп 21) // оставшаяся часть строки 
}е1зе БгеаКк // выход из цикла 


у 
теги $ + эх 

Рассмотренные выше функции вставки и замены подстрок (11$5 О и герасез О) 
готовы к практическому применению в программах, где требуется обработка строк. 
Вы можете сохранить определения этих функций в текстовом файле с расшире- 
нием .}, который будет играть роль библиотеки функций. Этот файл можно вы- 
зывать из основной программы, когда он потребуется. Более подробно этот во- 
прос мы рассмотрим в следующей главе. 


Функции удаления передних 
и заключительных пробелов 


При обработке строк (например, введенных пользователем в поля формы) неред- 
ко возникает задача удалить лишние передние и задние пробелы. Многие языки 
программирования имеют соответствующие встроенные функции, но в]ауа$ сре 
их нет. Поэтому не помешает создать их самому с помощью имеющихся средств 
и поместить в свою библиотеку (сохранить в текстовом файле с расширением .]°). 


Решить поставленную задачу можно несколькими способами. Я придумал сле- 
дующий алгоритм. Преобразуем исходную строку в массив слов, используя в ка- 
честве разделителя один пробел "". Затем необходимо проанализировать первые 
или последние элементы массива в зависимости от того, что нам требуется: уда- 
лить передние или задние пробелы в исходной строке. Допустим, необходимо уда- 
лить передние пробелы. Тогда, если исходная строка содержала М пробелов, пер- 
вые М элементов массива будут содержать пустые строки"". Мы проверяем в цикле 
значения первых элементов, пока не найдем непустой элемент или пока не исчер- 
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паем весь массив. Если первый непустой элемент массива имеет индекс 1, то со- 
здадим новый массив, содержащий элементы исходного, начиная с этого индекса. 
Наконец, склеим элементы этого массива в одну строку, используя в качестве раз- 
делителя строку с единственным пробелом " ". Все, что нам понадобится, — это 
методы объекта 5 1пт®, оператор цикла и оператор условного перехода. 


Сначала рассмотрим функцию ЦитО, удаляющую передние пробелы из исход- 
ной строки. 
ТипсНоп  Шгйт (хз{у) { 


Е (!(хзн.шадехо|(" ") == 0)) 
теагп хит /* вернуть исходную строку, 
если в ней нет передних пробелов */ 
уаг ат = хз. 5рИЕ(" // создаем массив из слов строки 
уаг1 = 0 
У\ВПе (1 < аз 1еп2){ 
И О@(зе == (“"))) 
ЬгеаК /* выходим из цикла, 
если элемент не пуст */ 
+ 
} 
азсг = азёг.в11се{1), // создаем массив 
тегигп азёг. о ("") // склеиваем элементы массива в строку 


} 
Функция Ипп1() для удаления заключительных пробелов в строке устроена ана- 
логично. Ее отличие в том, что поиск пробелов происходит с конца строки. Обра- 
тите внимание, что счетчик циклов в этом случае убывающий. 

ТипсНоп гит (х$4у) { 

№ (! (хз. 1азНптпаехОЕ (" ") == хэфг.1епо{и - 1)) 

гетигп хз{г 
уаг аз = хз г. р (" 


уаг | = азг.1епо{и -1 
мпНе  (1>0){ 
М (!(ази[ == (”"))) 
БгеаК 


= 


а${4г = аз{г.$Исе(0,.. 1+1) 

гетигп аз{г. от (” 

} 
Чтобы удалить из строки и передние, и концевые пробелы, достаточно выпол- 
нить следующее выражение: 


узи = иигйт (Цигм (хз) ) 
Впрочем, можно создать специальную функцию 1ги1(), которая тримингует 
строку: 


ТипсНоп тит(х$) { 
гефигп —г{и!т (ЦгЁм (х$1г)) 


В) 


1.7.2. Объект Аггау (Массив) 


Массив представляет собой упорядоченный набор данных. Его удобно предста- 
вить себе в виде одностолбцовой таблицы, содержащей некоторое количество 
строк. В ячейках такой таблицы могут находиться данные любого типа, в том чи- 
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еле и массивы. В последнем случае можно говорить о многомерных массивах (то 
есть о массивах массивов). Количество элементов в массиве (строк в таблице) 
называется длиной массива. К элементам массива можно обращаться в програм- 
ме по их порядковому номеру (индексу). Нумерация элементов массива начина- 
ется с нуля, так что первый элемент имеет индекс 0, а последний — на единицу 
меньший, чем длина массива. 


Массивы применяются во многих более или менее сложных программах обработ- 
ки данных, а в некоторых случаях без них просто не обойтись. Если среди исполь- 
зуемых данных есть группы таких, которые обрабатываются одинаковым обра- 
зом, то, возможно, лучше организовать их в виде массива. 


Создание массива 


Существует несколько способов создания массива. В любом случае прежде всего 
создается новый объект массива с использованием ключевого слова пе\: 


имя массива = пем Аггау([длина_массива]) 


Здесь длина_массива является необязательным числовым параметром, о чем гово- 
рят квадратные скобки. Если длина массива не указана, то создается пустой мас- 
сив, не содержащий ни одного элемента. В противном случае создается массив 
с указанным количеством элементов, однако все они имеют значение пиП (то есть 
не имеют значений). 


Вы можете сначала создать пустой массив, а затем добавить к нему нужное коли- 
чество элементов с помощью оператора присвоения. Заметим, что выражение 
с ключевыми словами пе\м Аггау создает экземпляр (копию) объекта Аггау. 


У объекта Аггау имеется свойство 1еп®{, значением которого является длина мас- 
сива. Чтобы получить значение этого свойства, необходимо использовать выра- 
жение имя массива.еп?@. 


Создав массив, можно присвоить значения его элементам, используя для этого 
оператор присвоения. В левой части оператора присвоения указывается имя мас- 
сива, а рядом с ним в квадратных скобках индекс элемента. Мы уже говорили, что 
к элементам массива обращаются по индексу: имя массива[индекс]. Здесь квад- 
ратные скобки обязательны. 


Рассмотрим создание массива еаг{П, содержащего в качестве элементов некото- 
рые характеристики нашей планеты. Обратите внимание, что элементы в этом 
массиве различных типов (строковые и числовые). 


еащп = пем Аггау(4) // массив из 4-х элементов 
еаг+Н[0] = "Планета" 

еаг® П] = "№ часа" 

еаг( [2] = 6378 

еаг в [3] = 365.25 


еаг( И еп? // значение равно 4 
Если нам потребуется значение, например, третьего элемента массива, то доста- 
точно использовать выражение еаг( 1 [2]. 
Другой способ создания массива заключается в непосредственном определении 
элементов в круглых скобках за ключевым словом Агтау. 
Пример 

сагЕй = пе\м Аггау ("Планета", "24 часа", 6378, 365.25) 
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ТауабспрЕ автоматически создает индексы для элементов массива, так что к эле- 
ментам массива, созданного таким способом, также можно обращаться по индексам. 


Третий способ создания массива — присвоить имя каждому элементу, подобно 
имени свойства объекта 


Пример 


еачп = пемАггауо // пустой массив 

еамй. журе = "Планета" 

еаг{п. х4дау = "24 часа" 

еаг{Н.гаЧдгиз = 6378 

еаг{Н.ретоа = 365.25 
В этом случае обращение к элементу происходит как к свойству объекта, напри- 
мер еаг@.гафи$. Возможен и такой вариант: еаг@["га@и5"]. Однако по индексу 


к элементам в таком массиве обращаться нельзя. 


Многомерные массивы 


Массивы, рассмотренные выше, являются одномерными. Их можно представить 
себе в виде таблицы из одного столбца. Однако элементы массива могут содер- 
жать данные различных типов, в том числе и объекты, а значит, и массивы. Если 
в качестве элементов некоторого одномерного массива создать массивы, то полу- 
чится двухмерный массив. Обращение к элементам такого массива происходит 
в соответствии со следующим синтаксисом: 


имя_массива[индекс уровня1] [индекс уровня?] 


Если массив имеет размерность, большую двух, то синтаксис обращения к масси- 
вам имеет аналогичный синтаксис: следует добавить нужное количество квадрат- 
ных скобок, заключающих нужные индексы. 


Типичным примером двухмерного массива является массив опций меню. У тако- 
го меню есть горизонтальная панель с опциями, называемая главным меню. Не- 
которым опциям главного меню соответствуют раскрывающиеся вертикальные 
подменю со своими опциями. Мы создаем массив, длина которого равна количе- 
ству опций главного меню. Элементы этого массива определяем как массивы на- 
званий опций соответствующих подменю. Чтобы была ясна структура нашей кон- 
струкции, мы выбрали названия опций надлежащим образом. Например, "Меню 


2.1" — название 1-й опции подменю, соответствующего 2-й опции главного меню. 
тепи = пем Аггауо 
тепи[0] = пем ап’ау Мен") 1.1", “Меню 1.2", ""Меню 1.3") 
тепи [1] пем аггауС'Меню 2.1", "Меню 2.2") 
тепу[2] = пем аггауС'Меню 3.1", "Меню 3.2" , "Меню 3.3", "Меню 3.4") 
Чтобы обратиться ко 2-й опции 3-го подменю, следует написать: 
тепу[2][1] // значение равно "Меню 3.2" 


Усложним нашу конструкцию, чтобы она содержала не только названия опций 
подменю, но и названия опций главного меню: 


тепи = пем Аггауо 
/* Массив опций главного меню: */ 
тепи[0] = пем Аггау(" Меню!", “"Меню?2", "МенюЗ") 
тепи[1] = пем Аггауо 
мепи [1 ] = пем АггауС'Меню 1.1". "Меню 1.2", "Меню 1.3") 
пи[1] [1] = пем АггауС'Меню 2.1", "Меню 2.2") 
пи[1] [2] = пем АггауС'Меню 3.1", "Меню 3.2 ‚ "Меню3.3", "Меню 3.4") 
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тепи[0][1] // значение равно "Меню 2" 
тепи[0][2] ’ значение равно "Меню 3" 
тепи[1] [1] [0] // значение равно "Меню 2. 1" 
тепц[1.][2][3] // значение равно "Меню 3. 2" 


Копирование массива 


Иногда требуется создать копию массива, чтобы сохранить исходные данные 
и предохранить их от последующих модификаций. Например, метод сортировки 
элементов массива, который рассмотрен ниже, изменяет исходный массив. Одна- 
ко для копирования массива недостаточно присвоить его другой переменной. Ис- 
пользуя новую переменную и оператор присвоения, мы создаем лишь новую ссыл- 
ку на прежний массив, а не новый массив. 


Пример 


а = пем Аггау(5, 2, 4, 3) 

х=а // ссылка на массив а 

а[2] = 25 // изменение значения элемента с индексом 2 
х[2] // значение равно 25, то есть новому значению 
а [2] 


В этом примере массивы а и х совпадают. 


Чтобы скопировать массив, то есть создать новый массив, элементы которого рав- 
ны соответствующим элементам исходного, следует воспользоваться оператором 
цикла, в котором элементам нового массива присваиваются значения элементов 
исходного, например: 


а = пем Аггау(5, 2, 4, 3) 

х = пем Атау0д // ссылка на массив а 

Гог(1=0; 1<а.1еп210; Н+ /* копирование значений массива а 
в элементы массива х */ 


{х [1] =а [1] } 


Свойства Аггау 


1. 


1еп — длина или, иными словами, количество элементов в массиве; целое 
число. 
Синтаксис: имя_массива.1епо{й 
Поскольку индексация элементов массива начинается с нуля, индекс послед- 
него элемента на единицу меньше длины массива. Это обстоятельство удобно 
использовать при добавлении к массиву нового элемента: туаггау [тауаггау.1еп211] 
= значение. 
рготофуре — свойство (прототип), позволяющее добавить новые свойства и ме- 
тоды ко всем созданным массивам. 
Например, следующее выражение добавляет свойство аиПог ко всем уже со- 
зданным массивам: 

Аггау .ргобобуре. аа Вог = "Иванов" 


Если теперь вместо Апау, ргоойуре написать имя существующего массива, то 
можно изменить значение свойства ап(Пог только для этого массива: 


туагау = пем АтауО0 // создание массива туаггау 
хаггау = пем Аггауо // создание массива хаггау 
Аггау.ргофотуре.ашпог = "Иванов" /* добавление прототипа 


ко всем массивам */ 
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туаггау.ащИог = “Иванов младший“ /* изменение свойства ашПог | 
для туатау */ 
хаггау.аш ог = "Сидоров" /* изменение свойства апПог 


для хаггау */ 
Прототипу можно присвоить функции. При этом они пополнят множество ме- 
тодов объекта Аггау. 
Пример 
Вычисление суммы элементов массива. Мы определяем функцию а$ип1(), кото- 
рая возвращает сумму элементов числового массива. В качестве параметра эта 


функция принимает массив. Затем создаем конкретный массив чисел. Нако- 
нец, присоединяем к прототипу массива новый метод бит — определенную ра- 


нее функцию абит(): 
ТипсНоп аЗит(хаггау) { 


маг $ = 
Тог(Г = 0; { <= хаггау 1епа -1; 1++){ 
$ = $ + хагау [1] 
| вии 5 
1 
шуаггау = пеу Аггау(2, 3,4) // создаем массив шуаггау из 3-х чисел 
Аггау. ргофофуре. Эт = абит /* присоединяем метод (около имени 


функции скобки указывать не нужно) */ 
гау . $ ит (туаггау) /* применяем метод Зап к массиву туаггау, 
передавая еюо в качестве параметра */ 


Этот пример призван просто проиллюстрировать использование свойства рго‘о- 
{уре. Чтобы вычислить сумму элементов массива, достаточно написать следую- 
щее выражение: 

3 = абим (муаггау) 


Методы Аггау 
Методы объекта Аггау предназначены для управления данными, сохраненными 
в структуре массива. 
1. сопса1(массив) — конкатенация массивов, объединяет два массива в третий мас- 
СИВ. 
Синтаксис: имя_массива!.сопса1(массив2) 
Возвращает массив. Данный метод не изменяет исходные массивы. 
Пример 
а! = пем аггау(1, 2, "Звезда") 
а? = пем аггауС"а"” "б", "в", "г") 
а3 = а|.сопсаё(а3) * /* результат - массив с элементами: 
1. 2, "Звезда", "а", '*б"., "В", "Г" #/ 
2. рГ’иКразделитель) — создает строку из элементов массива с указанным раздели- 
телем между ними; является строкой символов (возможно, пустой). 


Синтаксис: имя массиваоо!'п(строка) 
Возвращает строку символов. 
Примеры 


а = пем аггау(1, 2, "Звезда") 
а. ]01т(",") // значение - строка "1,2,3Звезда" 
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а = пе\у аггауа, 2, "Звезда") 
о // значение - строка "1 2 Звезда" 
3. рор() — удаляет последний элемент массива и возвращает его значение. 
Синтаксис: имя _массива.рор0 
Возвращает значение удаленного элемента массива. Совместимость: 1Е5.5+. 


Данный метод изменяет исходный массив. 
4. ри5И(значениеобъект) — добавляет к массиву указанное значение в качестве 
последнего элемента и возвращает новую длину массива. 


Синтаксис: имя_массива!.рибЫзначение | объект) 
Возвращает число. Совместимость: 1Е5.5+. Данный метод изменяет исходный 
массив. 

5. 5ПЩО — удаляет первый элемент массива и возвращает его значение. 
Синтаксис: имя_массива.3 АО 


Возвращает значение удаленного элемента массива. Совместимость: 1Е5.5+, 
ММ4+. Данный метод изменяет исходный массив. 


6. ипзИГтгЕзначениеобъект) — добавляет к массиву указанное значение в качестве 
первого элемента. 


Синтаксис: имя_массива.ип5МЩзначение | объект) 


Возвращает: ничего. Совместимость: 1Е5.5+. Данный метод изменяет исходный 
массив. 


7. геуегзеО — изменяет порядок следования элементов массива на противополож- 
НЫЙ. 


Синтаксис: имя_массива.геуегзе() 
Возвращает массив. Данный метод изменяет исходный массив. 
Пример 
а = пем аггау(Т. 2, "Звезда") 
а. геуеге () /* массив с элементами в следующем порядке: 
"Звезда", 2, 1 */ 
8. 5ифе(индекс1 [, индекс2]) — создает массив из элементов исходного массива 
с индексами указанного диапазона. 


Синтаксис: имя _массива.5Н5е(индекс! [, индекс?]) 
Возвращает массив. Данный метод не изменяет исходный массив. 


Второй параметр (конечный индекс) не является обязательным, о чем свиде- 
тельствуют квадратные скобки в описании синтаксиса. Если он не указан, то 
создаваемый массив содержит элементы исходного массива начиная с индекса 
индекс! идо конца. В противном случае создаваемый массив содержит элемен- 
ты исходного массива начиная с индекса индекс! идо индекса индекса, за ис- 
ключением последнего. При этом исходный массив остается без изменений. 
Пример 
а = пем аггау(1, 2, "Звезда", "а", "Ь") 


а.$115е(1,3) // массив с элементами: 2, "Звезда" 
а.$115е(2) // массив с элементами: "Звезда", "а", "Ь" 
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9. 501(функция_сортировки|) — сортирует (упорядочивает) элементы массива 
с помощью функции сравнения. 
Синтаксис: имя_массива.50И:([функция_сравнения]) 


Возвращает массив. Данный метод изменяет исходный массив. Параметр не 
обязателен, о чем свидетельствуют квадратные скобки. 


Если параметр не указан, то сортировка производится на основе сравнения 
А$СП-кодов символов значений. Это удобно для сравнения символьных строк, 
но не совсем подходит для сравнения чисел. Так, число 357 при сортировке счи- 
тается меньшим, чем 85, поскольку сначала сравниваются первые символы 
и только в случае их равенства сравниваются следующие, и т. д. Таким обра- 
зом, метод зо О без параметра подходит для простой сортировки массива со 
строковыми элементами. 


Можно создать свою собственную функцию для сравнения элементов массива, 
с помощью которой метод оО отсортирует весь массив. Имя этой функции 
(без кавычек и круглых скобок) передается методу в качестве параметра. При 
работе метода функции передаются два элемента массива, а ее код возвращает 
методу значение, указывающее, какой из элементов должен следовать за дру- 
гим. Допустим, сравниваются два элемента, х и у. Тогда в зависимости от чи- 
слового значения (отрицательного, 0 или положительного), возвращаемого функ- 
цией сравнения, методом 50() принимается одно из трех возможных решений: 


Значение, возвращаемое Результат сравнения хиу 
функцией сравнения 


<0 у следует за х 


Порядок следования х иу не изменяется 
>0 х следует за у 


Итак, по какому критерию сортировать элементы массива, определяется кодом 
функции сравнения. Если элемент массива имеет значение пи, то в Пиегпе 
ЕхрЮюгег он размещается в начале массива. 


Пример 
туаггау = пем Аггау(4, 2, 15, 3, 30 ) // числовой массив 
Рапсйоп сотр, у) { // функция сравнения гебиги х-у 


у згга г || /* массив с элементами в порядке: 
2, 3, 4. 15, 30 */ 
10. зрИсе(индекс, количество [, элем! [, элем2 [, ..эЛемм]]) — удаляет из массива не- 
сколько элементов и возвращает массив из удаленных элементов или заменя- 
ет значения элементов. 


Синтаксис: имя_массива.5рНсе(индекс, количество [, элем! [, элемё2 [, ...элемМ]]]) 


Возвращает массив. Совместимость: [Е5.5+. Данный метод изменяет исходный 
массив. 


Первые два параметра обязательны, а следующие — нет. Первый параметр яв- 
ляется индексом первого удаляемого элемента, а второй — количеством удаля- 
емых элементов. 
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Пример 
= пем Аггау ( "Вася", "Иаван", "Марья", 12, 5) 
х = а. $011 се(1,3) /* х- массив элементов: "Иван", "Марья", 12 


а - массив элементов: "Вася", 5 */ 


Метод $рИсеО позволяет также заменить значения элементов исходного масси- 
ва, если указаны третий и, возможно, последующие параметры. Эти параметры 
представляют значения, которыми следует заменить исходные значения эле- 
ментов массива. При таком использовании метода зрНсеО важен первый пара- 
метр (индекс), а второй (количество) может быть равным нулю. В любом слу- 
чае, если количество элементов замены больше значения второго параметра, то 
часть элементов исходного массива будет заменена, а часть элементов будет 
просто вставлена в него. При этом метод зрИсеО возвращает другой массив, со- 
стоящий из элементов исходного, индексы которых соответствуют первому 
и второму параметрам. Но это справедливо, если второй параметр не равен 0. 


Пример 
а = пем Аггау("Вася", "Иван", "Марья", 12, 5) 
х = а. эзрИс‹е(1,3, "Петр", "Кузьма", "Анна") 
х - массив элементов: "Иван", "Марья", 12 
/Га - массив элементов: "Вася", "Петр", Кузьма", "Анна", 5 


> 
| 


пем Аггау(" Вася", "Иван", "Марья", 12, 5) 
Хх = а. 5р11се(1,0, "Петр", ‚ "Кузьма", "Анна", "Федор",  "Ханс") 
Ш х - пустой массив 
/^ а - массив элементов: 
Вася етр", "Кузьма", "Анна", "Федор", "Ханс" */ 
НАоГосезит?О, ю5итз() — преобразуют содержимое массива в символьную 
строку. 
Метод юГосмезит?О поддерживается браузерами 1Е5.5+ и ММЗ+, а метод 
105120 — и более ранними версиями. Алгоритм преобразования по методу 
фоГосеит?О зависит от версии браузера. 


Для преобразования содержимого массива в строку рекомендую использовать 
метод]ош(). 


Функции обработки числовых массивов 


Во многих приложениях требуется получить статистические характеристики чи- 
словых данных, хранящихся в виде массива: сумму всех чисел, среднее, макси- 
мальное и минимальное значения. Здесь мы приведем коды функций, вычисляю- 
щих эти величины. 


Функция, возвращающая сумму значений всех элементов непустого массива: 


псИоп З@м { 


уаг 5=аМ[ О] 

Рог(уаг 1 = 1; 1<= аМ. [е1#-1; 1+) { 
в += ам 

гефигп $ 


} 


Очевидно, для вычисления среднего значения следует просто воспользоваться 
выражением  5(аМ)/аМЛепо@. 
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Функция, возвращающая минимальное значение среди элементов массива: 
РапсНоп Мищ(аМ){ 


уаг Мшт = аМ[0]| 
Гог(уаг 1 =1; 1 <= аМ.1е1#1-1; 1++){ 
1 (амп| < №шт) 
Мшш = ам[П 
1 
гесаги Миа 


} 


Функция, возвращающая максимальное значение среди элементов массива: 


ТипсНоп  Мтах(аМ){ 
маг Мтах = аМ[о] 
Тог(маг г = 1; 1 <= аМ.1епай -1; 1++){ 
И (амП] > Мтах) 
Мтах = ам[П 
} 


г@игп Мтах 


} 


Мы можем создать одну функцию, которая вычисляет все перечисленные выше 
статистические характеристики и возвращает их как значения массива: 

Рип оп зар $1 (ам) { 

ИМ ==0 || а\ == аи | ам == "*) 

гефигп пем Аггау(0,0,0,0) 

уаг $ =амМ [0] 

уаг Мтт = аМ[0] 

\аг Мтах = аМ[О] 


Тог(маг 1=1; 1<=аМ.1епо{-1; 1++){ 
$ += ам[1] 
й (амп < Мтм) 
№тт = ам 


И (ам[] > М№мтах) 
Мтах = амп 


} 


терагп пем Аггау(5, 8/аМ.1епдеь, Миши, М№ах) 

} 
В начале кода функции $ай58сО мы проверяем, не является ли параметр пустым. 
Если это так, то все статистические характеристики считаются равными нулю. 
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При разработке веб-страниц математические операции используются не столь 
часто, в отличие от строковых. Обычно они связаны с изменением координат эле- 
ментов страницы (свойства (ор, ей, ул, Ве1еВ{ таблицы стилей). Однако встре- 
чаются и более сложные случаи. Например, может потребоваться вычислить ста- 
тистические характеристики данных, содержащихся в некоторой таблице. Так или 
иначе, в этих задачах необходимо иметь дело с числами. О числах мы уже говори- 
ли в разделе, посвященном типам данных. Теперь рассмотрим их более подробно. 


Числа в ЧауаЗсир\ 


В Лауа$спре числа могуг быть только двух типов: целые и с плавающей точкой. 
Целые числа не имеют дробной части и не содержат разделительной точки. Числа 
с плавающей точкой имеют целую и дробную части, разделенные точкой. 
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Операции с целыми числами процессор компьютера выполняет значительно бы- 
стрее, чем операции с числами, имеющими точку. Это обстоятельство имеет смысл 
учитывать, когда расчетов много. Например, индексы, длины строкявляютей це- 
лочисленными. Число л, многие числа, полученные с помощью оператора деле- 
ния, денежные суммы ит. п. являются числами с плавающей точкой. 


В ]Лауа5сирЕ можно производить операции с числами различных типов. Это очень 
удобно. Однако при этом следует знать, какого числового типа будет результат. 
Если результат операции является числом с дробной частью, то он представляет- 
ся как число с плавающей точкой. Если результат оказался без дробной части, то 
он приводится к целочисленному типу, а не представляется числом, у которого 
в дробной части одни нули. 


Примеры 
2+3 | ’- целое число 
2+ 3.6 // 5.6 - число с плавающей точкой 
2.4 + 3.6 // 6 - целое число 
6.00 // число с плавающей точкой 


Числа можно представлять и в так называемой экспоненциальной форме, то есть в 
формате: число!ечисло2 или число!Ечисло2. Такая запись числа означает число 110’'иа” 


Пример 
1е5 й) 100 000 
2еб / 2 000 000 
1.5е3 // 1500 
+1.5е3 // 1500 
-1.5е3 // -1500 
Зе-4 // 0.ппоз 


Числа в Гауа$сире можно представлять в различных системах счисления, то есть 
в системах с различными основаниями: 10 (десятеричной), 16 (шестнадцатерич- 
ной) и 8 (восьмеричной). К десятеричной форме представления чисел мы при- 
выкли, однако следует помнить, что числа в этой форме не должны начинаться с 
О, потому что так записываются числа в восьмеричной системе. 


Запись числа в шестнадцатеричной форме начинается с префикса Ох (или ОХ), где 
первый символ ноль, а не буква О, затем следуют символы шестнадцатеричных 
цифр: О, 1, 2...., 9, а, Ь, с, 4, е, Г(буквы могут быть в любом регистре). Например, 
шестнадцатеричное число Ох4аЁв десятеричном представлении есть 1199. 


Запись числа в восьмеричной форме начинается с нуля, за которым следуют циф- 
ры от 0 до 7. Например, 027 (в десятеричном представлении — 23). В арифмети- 
ческих выражениях числа могут быть представлены в любой из перечисленных выше 
систем счисления, однако результат всегда приводится кдесятеричной форме. 


Пример 


Функция преобразования из десятеричной в шестнадцатеричную форму. Функ- 

ция {0!6() в этом примере принимает в качестве параметра десятеричное число и 

преобразует его в строку, содержащую это же число, но в шестнадцатеричной 

форме. При этом мы ограничиваемся числами, не превышающими 255 (в этом случае 

для представления числа потребуется не более двух шестнадцатеричных цифр). 
ТипсНоп +10916(110) { 


пспагз = "9123456789а6 се!" / строка, содержащая все 16-е цифры 
И ("0 > 255) тешги паИ 
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уаг 1 = п!0%16 

уаг } = (10 - И /16 
геи = "0х" 

ге’и{ += псваг$. спагАт(] ) 
гео { += Веваг$ . спагА(Т) 
геаги гео 


$0!6(250) // "ох" 

$0!6(30) // "бже" 

{016(30)+10 // "0же10" - склейка, а не сложение 
раг5е] пт 1016(30 + 10 // 


Напомним, что выражение видах += у эквивалентно выражению х =х-+ у. 
Функцию 10!6() можно также создать и на основе массивов: 


Еапсбоп 0!6(п!0) { 

Бспаг$ = пем Агтау ("0", "1 а ПЭ "4" Ир "бу "2", "3", "4" 
На БИ, Мое, Чем 

Ш (п!0 > 255) теги поП 

уаг 1 = п! 0%16 

уаг } = (п!0- 10/16 


гета( = "0х" 
геги{ += Бсвагз [1] 
тета += Меваг$ [1] 


геиги ге’та( 


Пример 


Функция преобразования из десятеричной в двоичную форму. Функция {02() в 
этом примере принимает в качестве параметра десятеричное число и преобразует 
его в строку, содержащую это же число, но во двоичной форме. Эта строка состо- 
ит из нулей и единиц. Здесь используется рекурсивный вызов функции {02() са- 
мой себя. Обратите внимание, что использование ключевого слова уаг здесь прин- 
ципиально важно из-за рекурсии, иначе функция будет работать неправильно. 
ТипсНоп 102(п!0) { 
Й (п!0 <2) 
геигп "" + п!10 // чтобы результат был строковым 

маг 1=п10%2 

уаг |=(п1!0-1)/2 

геигпт 102(])+1 

} 

Для преобразования строк, содержащих числа, в данные числового типа служат 
встроенные функции рагзешО и рагзеНоаО соответственно для представления 
в целочисленном виде и в виде числа с плавающей точкой. Ихмы уже рассматри- 
вали выше. Здесь следует отметить, что параметрами этих функций могут быть 
строки, содержащие числа не только в десятеричной, но и в шестнадцатеричнои, 
и в восьмеричной формах. Для указания основания системы счисления служит 
второй параметр этих функций. 


Примеры 


значение равно 255 
раг5е]п\ #1 значение равно МаМ 
рагзе1 п ("010") значение равно 8 
рагзе1те ('010", 8) '/ значение равно 8 
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| е1пт ( "010", 10) // значение равно 10 
рагзе1п{("010", 2) // значение равно 2 
рагзе1п1("010", 16) // значение равно 17 


Заметим, что функция рагзеРюаО в [Еб.0 работает неправильно, если указан вто- 
рой параметр (основание системы счисления). 


Для преобразования числа в строку, содержащую это число, достаточно исполь- 
зовать выражение сложения пустой строки с числом. 


Примеры 
и 25.78 // значение равно "25.78" 
Мана, 963 // значение равно "2500" 


Создание объекта Митрег 
Числа можно создавать обычным образом с помощью переменных и оператора 
присвоения, не прибегая к объекту Митбег. Однако этот объект обладает некото- 
рыми полезными свойствами и методами, которые иногда могут пригодиться. 
Объект Митфег создается с помощью выражения вида: 

переменная = пем Митбег( число) 
Доступ к свойствам и методам строкового объекта обеспечивается такими выра- 
жениями: 


число.свойство 
Миопрег. свойство 
число .методе [параметры] ) 
Моапрех , метод ( [параметры] ) 


Свойства Митрег 
® МАХУАПЕ — константа, значение которой равно наибольшему допустимому 
в Лауабсире значению числа (1.7976931348623157е-+308). 


. ММУАЦПЕ — константа, значение которой равно наименьшему допустимому 
в Лауа$сире значению числа (5е-324). 


. МЕСАТМЕМЕМПУ - число, меньшее, чем Митбег.МИМ_\МАШОЕ. 

. РОЗПИМЕУМЕМЛПТ - число, большее, чем Митбег.МАХ_\МАНОЕ. 

‚ МаМ — константа, имеющая значение МаМ, посредством которой Лауасире со- 
общает, что данные (параметр, возвращаемое значение) не являются числами 
(МоЕа МиштВег). 

. ргообуре — свойство (прототип), играющее такую же роль, что и в случае объ- 
екта Зе (см. выше). 


Методы Митрег 


Объект Митбег имеет несколько методов, из которых мы рассмотрим только четыре, 
предназначенные для представления чисел в виде строки в том или ином формате. 


1. юЕхропеп(КОЙМ4есТВо) — представляет число в экспоненциальной форме. 
Синтаксис: числоЛоЕхропепУаЦколичество) 
Возвращает строку. Совместимость: 1Е5.5+, ММ№6+. 


Параметр представляет собой целое число, определяющее, сколько цифр после 
точки следует указывать. 
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Примеры 
х=пем Мапрег (456 


) 
х. соЕхропепета1 (3) //, 4.560е+2 
х. СоБхропепеса1 (2) // 4.56е+2 
х. СоЕхропепета] (1) // 4.6е-2 
х. СоЕхропепета] (0) // 5е+2 


1:оПхес1 (количество) — представляет число в форме с фиксированным количе- 
ством цифр после точки. 


Синтаксис: числоЛоР1хес1(количество) 
Возвращает строку. Совместимость: [Е5.5+, ММ6+. 


Параметр представляет собой целое число, определяющее, сколько цифр после 
точки следует указывать. 


Примеры 

х=пе\ Митбег(25.65) 

х.10Е!хеа(3) // 25.650 

х.4оР!хеа(2) // 25.65 

х. оЕ1хе4 (1) //25.7 
ед (9 // 25.7 


{юРгедзюп(Т04НосТЬ) — представляет число с заданным общим количеством зна- 
чащих цифр. 

Синтаксис: число.ю0Ргес1юоп(104НосТЬ) 

Возвращает строку. Совместимость: 1Е5.5+, ММ6+. 


Параметр представляет собой целое число, определяющее, сколько всего цифр, 
до и после точки, следует указывать. 


Примеры 

х=пе"  Мишрег(135.45) 

х.1о Ргес1$101(6) // 135.450 
х. о Ргес1$10п(5) // 135.45 
х. тоРГгес1 $1 оп (4) // 135.5 
х.(0Ргес1 $101 (3) // 135 
х.(оРгес1$101 (2) // 1.4е2 


х.1о Ргес1 $101 (1) // Те? 

х. {оРгес1$10п(0) // Сообщение об ошибке 
( 1051:пд([основание]) — возвращает строковое представление числа в системе 
счисления с указанным основанием. 
Синтаксис: число.1:05Мпд([основание]) 
Возвращает строку. Если параметр не указан, имеется в виду десятеричная си- 
стема счисления. Вы можете указать 2 для двоичной системы или 16 — для шест- 
надцатеричной. Заметим, что этот метод имеют все объекты. 


Примеры 

х=пем Митбег(127.18) 

х. 1о5итаО // "127.18" 

х4о5нта(10) | "127.18" 

х.105тоа(16) | "7Е.2е147ае!4 7" 

х.4051119($) //' 177.134121727024366" 
пени Митрек5) 


х.4о5то(2) И "101" 
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1.7.4. Объект Ма! (Математика) 


Объект Ма предназначен для хранения некоторых математических констант 
(например, число я) и выполнения преобразований чисел с помощью типичных 
математических функций. Доступ к свойствам и методам объекта Май обеспечи- 
вается следующими выражениями: 


Ма.свойство 
МаЕВ .метод (параметры) 


Свойства Ма 


Свойства объекта Ма имеют в качестве своих значений математические константы. 


Е Постоянная Эйлера 

(м0 Значение натурального логарифма числа 10 

[№2 Значение натурального логарифма числа 2 

[0610Е Значение десятичного логарифма экспоненты (числа в) 
[0б2Е Значение двоичного логарифма экспоненты 

Р Значение постоянной я 

ЗЧКТ1_2 Значение квадратного корня ю-1/2 

ЗОВТ Значение квадратного корня из 2 

Пример 


Для вычисления длины окружности при известном радиусе требуется число п, 
которое можно взять как свойство объекта Ма*й. 


маг В = 10 // радиус окружности 
сиси$ = 2*А*Майи. Р! // длина окружности 
Методы Май 
. аБз(число) — возвращает модуль (абсолютное значение) числа; 
. асо$(число) — возвращает арккосинус числа; 
. а5(число) — возвращает арксинус числа; 


. аап(4НОю) — возвращает арктангенс числа; 


. а(ап2(х, у) — возвращает угол в полярных координатах точки; 


. се{(.(число) — округляет число вверх до ближайшего целого; 

. с0$(число) — возвращает косинус числа; 

. ехр(число) — возвращает число е в степени число; 

. поог(число) — округляет число вниз до ближайшего целого; 

. 1од(число) — возвращает натуральный логарифм числа; 

. тах(число1,число2) — возвращает большее из чиселчисло!, число2; 
.  1пии(число1 число?) — возвращает меньшее из чиселчисло!, число2; 


® ро\л/(число!, число?) — возврашаетч исло! в степени число2; 
. гапйотО — возвращает случайное число между 0 и 1; 


.  гоипс!( число) — округляет число до ближайшего целого; 
. зш(число) — возвращает синус числа; 
. 34и(4Мспо) — возвращает квадратный корень из числа; 


. 1ап(число) — возвращает тангенс числа. 
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Примеры 
1. Метод гап4отО возвращает случайное число, лежащее в интервале от 0 до 1. 
Чтобы получить случайное число в пределах от 0 до М№тах, следует написать 
следующее выражение: 
х = Мтах'Ма . гапдотт) 
Если требуется получить случайное число в интервале от Ми до М№тах, то из 
элементарного отношения пропорций получаем следующее выражение: 


х = №Мтш + (Мтах - Мп) * Май. гапаотоО 
Можно также создать функцию для вычисления случайного числа в заданном 
интервале: 


ТипсИоп гапа(а, 5) { 
гетигп а+ (Б-а) *Май . гапдот() 
} 


Эта функция может потребоваться, например, для внесения некоторой непред- 
сказуемости (нерегулярности) перемещения элементов на веб-странице, выбо- 
ра цветов для мигающей надписи ит. п. 


2. Для вычисления значения тригонометрической функции $1п(х), у которой ар- 
гумент х выражен в градусах, следует применить следующее выражение: 
Ма{1. эт (Ма1й.Р1*х/180) 


Функции для решения некоторых математическихзадач 


Язык ЛауазсирЕ можно использовать не только для управления веб-страницами, 
но и для решения разного рода расчетных и математических задач. С другой сто- 
роны, составление или анализ соответствующих программ является хорошим уп- 
ражнением в программировании. Поэтому предлагаю вам рассмотреть несколько 
несложных, но полезных программ расчетного характера. 


Решение квадратного уравнения 


С этой задачей мы знакомы еще со школы. Напомню, в чем она заключается. Тре- 
буется найти два числах! их, —.такие, чтобы при подстановке любого из них в 
выражение ах’ + Бх + с результат его вычисления был бы равен 0. Такие х, их, 
называются корнями уравнения ах° + Бх +с =0. 


На первый взгляд может показаться, что для решения этой задачи следует просто 
вспомнить или найти в справочнике подходящую формулу. И действительно, это 
сделать нетрудно. Однако в программах для решения задач такого рода часто зна- 
чительную долю кода занимают различные проверки и анализ исходных данных. 
Организация же вычислений по конечным формулам из справочника — не самое 
сложное. Так, в рассматриваемой задаче в зависимости от значений коэффициен- 
това, Аи с возможны различные частные случаи. Корни могут быть комплексны- 
ми идействительными. Допустим, нас интересуют только действительные корни. 
Тогда корней может и не быть совсем, или быть только один, или два, одинаковые 
или различные. Таким образом, прежде чем мы дойдем до применения формулы, 
придется проанализировать, с каким именно случаем имеем дело. 


Очевидно, функция (назовем ее ЪеаО) для вычисления действительных корней 
квадратного уравнения должна принимать три параметра — коэффициенты а, В 
и с. Возвращаемым значением будет массив. Сделаем так, что если корней нет, то 
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этот массив будет пустым. В противном случае в нем будет два элемента. Если 
уравнение имеет два корня, то запишем их в качестве элементов возвращаемого 
массива. Если корень единственный, то он будет записан в первом элементе мас- 
сива, а второй элемент будет пустым (пи). 


Ниже приводится один из возможных вариантов определения функции: 


ТипсНоп Беа(а, Ь, с){ // решение квадратного уравнения 
уаг агеф = пемАггауо 
уаг О = Б*Ь - 4*а*с 


Й (а == 0) { 
Е (1(6 ==0)){ 
аге{[0] = -с/6 
аге{ [1] = пи! 

}. ы о 
геигпт ага // единственный корень или нет корней 
} 

й (О ==0) { // одинаковые корни 

аге+[0]=-6/2/а 

аге{ [1] =аге{[0] 

и (0>0){ // различные корни 

аге [0] = (-6 - Ма{.$4аг{(0))/2/а 

аге{[1] = (-6 + Ма!.$аг{(0))/2/а 
ао агеё 
} 

Выполним проверку работы функции на нескольких наборах исходных данных: 
6е9(0, 2, 6) // массив (-3, пи||) 
Беа(1, -2, 1) // массив (1, 1) 
Беа(3, 4, -2.5) /* массив ( -(-1.797054997187545, 
0.4637216638542114) У 

Беа(2, 0. 5) // пустой массив 


Вычисление интеграла 


Интеграл от некоторого выражения / (х) с одной переменной х на интервале ее 
значений от а до В можно понимать как площадь, ограниченную кривойу =/(х), 
осью абсцисс (х) и двумя прямыми, параллельными оси ординат {у) и проходя- 
щими через точки аи р на оси (х). Аналогия с площадью справедлива лишь отча- 
сти. Если указать, что площадь кривой, проходящей ниже оси абсцисс, является 
отрицательной, тогда все в порядке. 


Итак, для вычисления интеграла от выражения требуется вычислить площадь 
некоторой замысловатой фигуры. Алгоритм решения этой задачи основан на про- 
стой идее разбить сложную фигуру на множество простых, площадь которых лег- 
ко вычислить, а затем взять сумму этих площадей. Здесь возникает вопрос о точ- 
ности такого решения. Однако легко заметить, что чем меньше элементарные 
фигуры и чем больше их количество, тем ближе сумма их площадей к действи- 
тельной площади исходной фигуры. Это так называемая задача приближения или 
аппроксимации. 


В качестве элементарной фигуры можно взять прямоугольник или трапецию. Их 
площади легко вычисляются. Однако трапеция вписывается в кривую лучше, чем 
прямоугольник, поэтому выберем именно ее. Напомню: чтобы найти площадь тра- 
пеции, необходимо умножить полусумму ее параллельных сторон на высоту. Для 
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получения множества таких трапеций требуется разбить отрезок аЪ оси абсцисс 
на большое количество элементарных отрезков. В математике все идеально: отре- 
зок аб разбивается на элементарные отрезки, длина которых стремится к нулю, 
то есть является бесконечно малой величиной. На практике мы имеем дело с ко- 
нечными величинами. Более того, мы должны учесть, что с уменьшением длины 
элементарных отрезков и ростом их количества возрастает время вычислений. 
Таким образом, нам потребуется найти компромисс между точностью решения 
задачи и временными затратами. 


Теперь займемся технической стороной вопроса. Что следует передавать нашей 
функции вычисления в качестве параметров? Я вспомнил о великолепной встро- 
енной функции еуа1(), которая может вычислять выражения Лауа5спрё, передан- 
ные ей в виде строки. Поэтому функция НщезтаО для вычисления интеграла бу- 
дет принимать строку, содержащую выражение вида Кх), в котором переменная 
будет обозначена строчной латинской буквой х, например "5*х*х -+ 10". Два дру- 
гих параметра — числа а и Ь, соответствующие концам интервала интегрирова- 
ния. Ниже приведено определение функции незтаЮ: 

ТипсНоп 1п(еодга|(ехргез1юоп, а, 6){ // интеграл 

уаг х, у|, у2, п, Пепо\в, ах, 5 =0 

1епом = Ма.абз(Ь - а) 


п = 10 // количество элементарных отрезков 
ах = 1епо{П/п // длина элементарного отрезка 
х=а /* начальное значение переменной х 
в выражении */ 
У = еуа(ехргез!юоп) 
х = а+ 
у2 = еуа(ехргез!юоп) 
$ = М +у2)'ах/2 
Тог(т = 2; 1< = п/1++) { 
я = У2 
х=х+ ах 
у2 = еуа|(ехргезз1оп) 
З= (У -+у?)* 4» 
геиги 5 


Проверим, как работает эта функция: 


11(езга1("х", 0, 1) . `000000000000002 
(точное значение = 0.5) */ 


1п(езга1("х*х", 0, 1) /* 0.33335000000000037 

(точное значение = 0.3333...) */ 
11(езга1("х*х", 0, 10) /* 333.34999999999917 

(точное значение = 333. 333333.) */ 


Если точность вычислений нас не устраивает, то это обусловлено малым значе- 
нием п количества отрезков разбиения интервала аб. При большой длине этого 
интервала п = 100 будет явно недостаточно. Конечно, можно передавать это значе- 
ние функции в качестве четвертого параметра. Однако я поступил иначе: если 
длина интервала интегрирования больше 2, то п вычисляется по некоторой фор- 
муле, а иначе п равно 100. Кроме того, я добавил проверки крайних случаев, что- 
бы при них не возникало ошибок. В итоге получился следующий код: 


ТипсНоп ищедга(ехргез$1оптп, а, 6){ // интеграл 
И ((ехргеззюп || '6&8а) 
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геиги 0 
Е а = 

геиги 0 
уаг х, У1, У2, п, 1епе{И, @х,5$=0 
1еп5{1 = Ма. а55(5 - а) 


Я = Ма .шт(а.5) // если левый предел больше правого 
6 = Май .шах(а, 5) // если правый предел меныше левого 
а = Я 

п = 10 

| (еп91>2) п=Ма.гоипа(100*Ма+{й.109 (1епд1й-1)) 

ах = еп /п // длина элементарного отрезка 
х=а /* начальное значение переменной х 


в выражении */ 
У! = еуа(ехрге$$10п) 
х=а+ 
у2 = ехуа(ехргез оп) 
$ = (у + у2)*9х/2 
#0г(1=2; 1<=1'1++){ 


Чх 
еуа(ехрге$!оп) 
$4= (У + у2)*49х/2 


тебаги 5 


Выполним проверку: 
1п6едга1 ("х*х", 0, 10) /» 333.33749999999906 
(точное значение = 333.3333...) */ 
Заметьте, что в данном случае точность после наших коррекций увеличилась на 
порядок. 


Вычисление производной 


Производная от выражения (функции) / (х) с одной переменной х в некоторой 
точке а интерпретируется как скорость изменения значения этого выражения при 
значении х, равном а. Например, если выражение / (х) описывает зависимость 
пройденного пути от времени, то производная от/(х)в момент времени { равна 
скорости движения в этот момент. 


Алгоритм решения этой задачи следующий: необходимо вычислить значения вы- 
ражения в двух тестовых точках, расположенных рядом с заданной, а затем взять 
разность этих значений и разделить ее на расстояние между тестовыми точками. 
Чем ближе расположены тестовые точки к заданной, тем точнее получается ре- 
зультат. Мы выберем их так, чтобы заданная точка находилась посередине между 
тестовыми точками. 


Как и вычисление интеграла, вычисление производной будет базироваться на 
встроенной функции еуаЮ, возвращающей значение выражения, переданное ей 
в виде строки как параметр. Функция Ру для вычисления производной при- 
нимает строку, содержащую выражение, в котором переменная обозначена строч- 
ной латинской буквой х, например "25*х - 2". Второй параметр указывает точку, 
в которой следует вычислить значение производной. Вот вариант кода: 

КипсНоп Оуах(ехргез$$юп ‚ а) { // производная 

! ((ехргез$юп) // если нет выражения 
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геаги 0 
уаг х, у, ах 
4х = 0.000025 


х =а - @& . // 1-я тестовая точка 
у = еуаКехрге$ оп) 
х =а+ 4х // 2-я тестовая точка 


гегагпи (еуа(ехргез$юпт) - у)/2/Ах) 
Проверочные примеры: 


буах("х",1) // 0.9999999999998899 (точное значение равно 1) 
Буах("х*х", 1) // 1.9999999999997797 (точное значение равно 2) 


Поиск экстремума 


Экстремум выражения (функции)Кх) — это пара чисел (х„ г/,), таких, что при 
подстановке^ в выражение/(л:) вместо переменнойхзначение этого выражения 
будет равно своему максимальному или минимальному значению уй. Вообще го- 
воря, функция может иметь несколько экстремумов или не иметь их вообще. Мы 
напишем код функции ехбетитО, которая вычисляет экстремум выражения, 
если он действительно у него есть (график этого выражения имеет «холм» или 
«впадину»). 


Алгоритм решения задачи основан на том, что значение производной выражения 
в точке экстремума, или перегиба, равно 0. 


Как и в случае вычисления интеграла и производной, при поиске экстремума бу- 
дет использоваться встроенная функции еуа[(), возврашающая значение выра- 
жения, переданного ей в виде строки как параметр. Функция ехбетитО для 
поиска экстемума принимает строку, содержащую выражение, в котором пе- 
ременная обозначена строчной латинской буквой х, например "5*х*х - 2*х". 
Второй и третий параметры указывают границы интервала, в котором следует 
искатьх, Последний, четвертый параметр задает точность поиска. Вот вари- 
ант кода: 


ГопсИоп ехтетит(ехрге$$10п, а, Б, а) { // экстремум 
Ш (14) а= 0.001 

уаг х, У|, Уу2, 1 

х =а 

у! = Оуах(ехргезюп, а) 

1 =1 

У\ВИе ((х‹<= Б)&&( <= 1000)) { 

у2 = Руах(ехргез$1оп, ха) 

Ш ((1<0)&&(у2>=0)||(у2<0)&&(у>=0)) { 
х=х+4* Ма+{Н.абз(у1) /(Ма{И.аб$(у!)+Ма{й.абз(у2)) 
тегиагпи пем Агтау(х, еуа1(ехрге$$1оп)) 

) 

х+= а 


тегагп пем АггауО 


} 


Проверочный пример: 
ех{гешию ("х*х-1",-1, 1, 0.01) /* (7.528699885739343е-16, -1) 
точное значение равно (0, -1) */ 
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ВНИМАНИЕ - — —_ 


Если график выражения имеет несколько «холмов» или «впадин», то функция определит 
лишь один из них, ближайший кточке а. 


1.7.5. Объект Вае (Дата) 


Во многих приложениях приходится отображать дату и время, подсчитывать ко- 
личество дней, оставшихся до заданной даты, и т. п. Некоторые программы даже 
управляются посредством значений дат и времени. В основе всех операций, свя- 
занных с датами и временем, лежат текущие системные дата и время, установлен- 
ные на вашем компьютере. 


Со временем дела обстоят не так просто, как кажется на первый взгляд. Вспомни- 
те, что существуют временные зоны (часовые пояса), а также сезонные поправки 
времени. Так, например, текущее время в Санкт-Петербурге отличается от време- 
ни в Иркутске на 5 часов. Если в Иркутске уже полночь, то в Петербурге еше 
только 19 часов. Чтобы иметь возможность координировать деятельность во вре- 
мени организаций и физических лиц в различных точках нашей планеты, была 
введена система отсчета времени. Она связана с меридианом, проходящим через 
астрономическую обсерваторию в городе Гринвич в Великобритании. Эту вре- 
менную зону называют средним временем по Гринвичу (Отгеепу1св Меап Тиае — 
ОМТ). Недавно кроме аббревиатуры СМТ стали использовать еще одну — ОТС 
(Ошхегза! Типе Соог4таеа — Всеобщее Скоординированное Время). 


Если системные часы вашего компьютера установлены правильно, то отсчет вре- 
мени производится в системе СМТ. Однако на Панели управления обычно уста- 
навливается локальное время, соответствующее вашему часовому поясу. При со- 
здании и изменении файлов на вашем компьютере фиксируется именно локальное 
время. Вместе с тем операционная система знает разницу между локальным вре- 
менем и СМТ. При перемещении компьютера из одного часового пояса в другой 
необходимо изменить установки именно часового пояса, а не текущего системно- 
го времени (показания системных часов). Даты и время, генерируемые в сцена- 
риях, сохраняются в памяти в системе СМТ, но пользователю выводятся, как пра- 
вило, в локальном виде. 


В программе на Лауа5сире нельзя просто написать 30.10.2002, чтобы получить 
значение даты, с которым в дальнейшем можно производить некие операции. Зна- 
чения даты и времени создаются как экземпляры специального объекта Рае. При 
этом объект сам будет «знать», что не бывает 31 июня и 30 февраля, а в високос- 
ных годах 366 дней. 


Создание объекта даты 
Объект даты создается с помощью выражения вида: 
имяОбъектаДаты = пем Ба{е([параметры]) 


Параметры не обязательны, на что указывают квадратные скобки. Обратите вни- 
мание,чтоимяОбъектаДатыявляетсяобъектомдаты, анезначениемкакого-нибудь 
другого типа (например, строкой или числом). 
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Для манипуляций с объектом даты применяется множество методов объекта аще. 
При этом используется такой синтаксис: 
переменная = имяОбъектаДаты.методО 


Если, например, объекту даты требуется присвоить новое значение, то для этого 
используется соответствующий метод: 


переменная = имяОбъектаДаты.метод(новое_ значение) 


Рассмотрим в качестве примера изменение значения года текущей системной даты: 


хаае = пем Баеб /* создание объекта, содержащего 
текущую дату и время */ 
\еаг = хаще.де\еаг() /* в переменной У\еаг содержится 
значение текущего года */ 
\еаг = Уеаг +3 /х в переменной У\еаг содержится 


значение, большее, чем текущий год, на 3 */ 
зг (У /* в объекте устанавливается 
новое значение года */ 
При создании объекта даты с помощью выражения пе\у Ра{еО, можно указать 
в качестве параметров, какие дату и время следует установить в этом объекте. Это 
можно сделать пятью способами: 


пем Ба{е{! Месяц дд, гггг чч:мм:сс") 
пеми Оаг.е("Месяц дд, гггг”) 
пемВае(тт, мм, дд, чч, мм, ее) 
пемО=зе(иг, мм,дд) 

пеми Оат.е(миллисекунды) 


В первых двух способах параметры задаются в виде строки, в которой указаны 
компоненты даты и времени. Буквенные обозначения определяют шаблон пара- 
метров. Обратите внимание на разделители — запятые и двоеточия. Время ука- 
зывать не обязательно. Если компоненты времени опущены, то устанавливается 
значение 0 (полночь). Компоненты даты обязательно должны быть указаны. Ме- 
сяц указывается в виде полного его английского названия (аббревиатуры не до- 
пускаются). Остальные компоненты указываются в виде чисел. Если число мень- 
ше 10, то можно писать одну цифру, не записывая ведущий 0 (например. 3:05:32). 


В третьем и четвертом способах компоненты даты и времени представляются це- 
лыми числами, разделенными запятыми. 


В последнем способе дата и время задаются целым числом, которое представляет 
количество миллисекунд, прошедших с начала | января 1970 года (то есть с мо- 
мента 00:00:00). Количество миллисекунд, отсчитанное от указанной стартовой 
даты, позволяет вычислить все компоненты и даты, и времени. 


Методы объекта ОБае 


Для чтения и изменения информации о дате и времени, хранящейся в объекте 
даты, служат методы объекта Рае (табл. 1.3). Напомним, что объект даты создает- 
ся с помощью выражения: 

имяОбъектаДаты = пем Оае([параметры]) 


Затем, чтобы применить метод метод() к объекту даты имяОбъектаДаты, следует 
написать: имяОбъектаДаты.метод([параметры]). 
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Довольно болышое множество всех методов можно разделить на две категории: 
методы получения значений (их названия имеют префикс 261) и методы установ- 
ки новых значений (их названия имеют префикс $. В каждой категории выде- 
ляются две группы методов — для локального формата и формата ОТС. Методы 
позволяют работать с отдельными компонентами даты и времени (годом, меся- 
цем, числом, днем недели, часами, минутами, секундами и миллисекундами). 


Таблица 1.3. Методы объекта Бае 


Метод Диапазон значений 
дегиЦ\еаг() 1970-... 
дееаг() ТО-... 
де{Моп{й() 0-11 
де{Ра{е() 1-31 
де{Рау() 0-6 
де{Ноиг5( 0-23 
деМтщез() 0-59 
де{5есопа$5() 0-59 
де{Т!те() 0-.. 
демнИзесопа$() 0-.. 
де\ЧтсРиИ\еаг() 1970-.. 
дечтСМотй() 0-11 
деЧтСсСОа{е() 1-31 

де ТСРВау() 0-6 
де\тТСНоиг$() 0-23 
дечтСмМтше$() 0-59 

де ТСЗесопа$@ 0-59 
дечтсмИИзесопа$() 0-.. 
зеМеаг(3НЗ4) 1970-... 
бариЦ\еа(3НЗ4) 1970-... 
зе!Моми(ЗНа4) 0-11 
зеае(3Н3З4) 1-31 
зеау(3НЗ4) 0-6 
зеНочг$(3НЗ4) 0-23 
зеаМтщез$(3НЗ4) 0-59 
з@есопа$(3НЗ4) 0-59 
земМИзесопа$(ЗНа4) 0-... 

зе ите(3НЗ4) 0-... 
зе ТСРийи УеакЗНЗА) 1970- 


Описание 


Год 

Год 

Месяц (январь = 0) 

Число 

День недели (воскресенье = 0) 

Часы в 24-часовом формате 

Минуты 

Секунды 

Миллисекунды с 1.1.70 00:00:00 СМТ 
Миллисекунды с 1.1.70 00:00:00 СМТ 

Год УТС 

Месяц ЦТС (январь = 0) 

Число УТС 

День недели ОТС (воскресенье = 0) 

Часы ОТС в 24-часовом формате 

Минуты УТС 

Секунды ЧТС 

Миллисекунды (ТС с 1.1.70 00:00:00 СМТ 
Установка года (четырехзначного) 

Установка года 

Установка месяца (январь = 0) 

Установка числа 

Установка дня недели (воскресенье = 0) 
Установка часов в 24-часовом формате 
Установка минуг 

Установка секунд, 

Установка миллисекунд с 1.1.70 00:00:00 СМТ 
Установка миллисекунд с 1.1.70 00:00:00 СМТ 
Установка года УТС л 


проиолжепие ту 
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Таблица 1.3 (продолжение) 


Метод Диапазон ‘значений Описание 

зе/тСМотй(3НЗ4) 0-11 Установка месяца ЦТС (январь = 0) 

зейтСО (3Н3З4) 1-31 Установка числа ЦТС 

зе ТСВау(3НЗА) 0-6 Установка дня недели ЦТС (воскресенье = 0 ) 

зе/ТСНоиг®(ЗНа4) 0-23 Установка часов УТС в 24-часовом формате 

зе/ТСМтише$(3НЗ4) 0-59 установка минут УТС 

зе ТСЗесопа$(ЗНа4) 0-59 Установка секунд ЦТС 

зеТСМИесопа$(3НЗ4) О0-... Установка миллисекунд ЧТС с 1.1.70 00:00:00 
СМТ 

де итегопеОЙзет () 0-... Разница в минутах по отношению к @МТОТС 

1оБайе5 ито) Строка с датой (без времени) в формате 
браузера (1Е5.5) 

1о@МТ$ит9() Строка с датой и временем в глобальном 
формате 

1оГос3З!еВа{еитод() Строка с датой без времени в локализован- 
ном формате системы (ММб, 1Е5.5) 

1оГосае {ито() Строка с датой и временем в локализованном 
формате системы 

{оГоса!еТите$ {19() Строка с временем без даты и в локализован- 
ном формате системы (М№б, 1Е5.5) 

тоэЗто() Строка с датой и временем в формате 
браузера 

{оТите${ит9() Строка с временем без даты в формате 
браузера (1Е5Б.5) 

ОТС п9() Строка с датой и временем в глобальном 
формате 

ОЗ1е.рагзе("дайе по") Преобразование строки с датой в число 
миллисекунд 

Рае.0ТС(3НЗ4) Преобразование строки с датой СМТ в число _ 


Вычислять разность двух дат или создавать счетчик времени, оставшегося до не- 
которого заданного срока, можно с помощью методов как для локального форма- 
та, так и для ОТС. Не следует применять выражения, использующие различные 
форматы времени, поскольку результаты могут оказаться неправильными. Фор- 
мат ОТС обычно применяется в расчетах, учитывающих часовой пояс. 


Следует также учитывать, что нумерация месяцев, дней недели, часов, минут и се- 
кунд начинается с 0. Для компонентов времени это естественно. Однако при та- 
кой нумерации декабрь оказывается 11-м месяцем в году, а не 12-м, как это при- 
нято повсеместно. Воскресенье (Зипдау) является 0-м днем недели, а не 7-м. 


Значение года ХХ века представляется в двузначном формате как разность меж- 
ду этим годом и 1900. Например, 1998 год представляется как 98. Годы до 1900 
и после 1999 обозначаются в четырехзначном формате. Например, 2002 год нуж- 
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нотаки писать —2002, поскольку02 — это 1902 год. МетодзеЕиПУеаг() возвраща- 
ет четырехзначное значение года. 


Примеры 
Допустим, что сейчас 2003 год. 
1одау = пем Ба() // текущие дата и время 
\еаг = {о4ау .де\УеагО // 2003 
{одау = пем Га (98,11,6) /* объект даты фодау содержит информацию 
о дате 6 ноября 1998 года, 00:00:00 */ 
\еаг = тодау.де{УеагО // 98 
{одау. детРиПУеагО // 1998 


Изменение любого компонентадаты производится с помощью 'соответствующего 
метода, название которого начинается с приставки $1. При этом значения других 
компонентов пересчитываются автоматически. 


В следующем примере мы создаем объект даты, содержащий некоторую конкрет- 
ную дату. Затем мы устанавливаем новое значение года. При этом в объекте даты 
изменяется и число. 


пудае = пем Оае(1952, 10,6) // "Три №м 6 00:00:00 9ТС+0300 1952" 


ппудау = тудае. де{ауО // 6 
тудате . зе Уеаг (2003) // установка 2003 года 
ппудау = тудае .де{ауО // 4 


При попытке отобразить значение объекта даты оно автоматически преобразует- 
ся в строку методом ф05тз(). Формат этой строки зависит от операционной сис- 
темы и браузера. Например, для УМтдо\$ 98 и Пиегпе{ Ехр|огег 5.5 строка, содер- 
жащая информацию объекта даты, имеет следующий вид: 

Трое ОсЕ 31 13:16:23 ОТС+0300 2002, 
то есть четверг, октябрь, 31, 13 часов 16 минут 23 секунды всеобщего времени, 
скорректированного на 3 часа, 2002 год. 


Если коррекцию времени с учетом часового пояса производить не требуется, то 
для строкового представления даты и времени можно воспользоваться методом 
ФоГосме и т20: 

тудае = пем Ба{еО 

тудате 4о1оса!е{ипа0О // "З1 октября 2002 г. 14:15:30" 
В браузерах 1Е5.5+ И ММ 6 + работают еще два метода представления отдельно даты 
и времени в виде строки: 

тудае = пем БаеО 

туда{е. 101осаедаеитоо // "З1 октября 2002 г." 

тудате. фо оса1еТ1те$ {г1пр() // "14:15:30" 
Заметим, что формат представления даты и времени, обеспечиваемый методами 
оГосааезит?О и ®ГосаТтеитт?О, зависит от настроек операционной систе- 
мы и браузера. Если вы будете использовать эти методы для вывода даты и време- 
ни на веб-страницу, то они будут выглядеть так, как пользователь привык их ви- 
деть на своем компьютере. 


С датой иногда приходится выполнять различные вычисления, такие как опреде- 
ление даты через заданное количество дней от текущей или количество дней между 
двумя датами. Вот здесь как раз и требуется предварительный подсчет миллисе- 
кунд, содержащихся в минуте, часе, сутках и т. д. 
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Примеры 
Г Определим дату, которая наступит через неделю относительно текущей: 
меек = 1000*60*60*24*7 /* количество миллисекунд 
в неделе - 604800000 */ 
тудае = пем Бае() // объект даты с текущей датой 
туда{е_тз = туда{е.де{Т!те@д /* текущая дата, представленная 
количеством миллисекунд 
от 1.01.1970 00:00:00 */ 
тудае тз += меек // тауаме_тз = туде тз + меек 
мудате . зе{Т1те (тудате_т$) /* установка новой даты 
в объекте тудае */ 
пемаа{е = туда{е. {о оса!е5{ита0; // новая дата в виде строки 
2. Определим количество дней между двумя датами, например 10 февраля 2003 


и 5 марта 2003. Для этого создадим сначала два соответствующих объекта даты: 

@а1е! = пе ПОае(2003 ,01,10) 

4ае?2 = пем Оае(2003,02,5) 
Переменные аа и дав, содержат длинные строки, содержащие даты (напри- 
мер, он Ее 10 00:00:00 9ТС-+0300 2003). Чтобы перевести их в количество мил- 
лисекунд, воспользуемся методом рагзе() объекта Рае. Затем вычислим разность 
Пае.раге(4ае2) и Оае.рагзе(4ае) и разделим ее на количество миллисекунд 
в одних сутках: 

Чауз = (Ба{е.рагзе(4а{е2) - Бае.рагзе(9а{е!))/1000/60/60/24 

// результат: 23 

Часто приходится иметь дело с датами, представленными в виде строк в фор- 
мате "лд.ммаи", причем месяцы нумеруются с 1 до 12, анес Одо 11. В этом 
случае, чтобы воспользоваться методами объекта Оайе, необходимо предвари- 
тельно выполнить соответствующие преобразования. 


Допустим, исходная дата $1г4айе представляется в виде строки в формате 
"дд.мм.гггг", а для создания объекта даты используется формат параметров 
‘г, мм, дд". Тогда необходимые преобразования исходных данных выглядят сле- 
дующим образом: 


аз{гаате = з1гаа{е. зрИТ (".") /* массив подстрок, полученных 
из строки ${г4афе с использованием 
точки как разделителя */ 
/* создаем объект даты */ 
туда+е = пем ПБа{е(а${г4а{е[2] ‚ аз{гда{е [1]-1, аз{гда+е[0]) 
Развивая идею, рассмотренную в предыдущем примере, мы могли бы создать 
функцию, принимающую в качестве параметра строку, содержащую дату 
и время в привычном для нас формате "лд.мм.ат чч:мм:сс"” и возвращающую 
объект даты. Будем считать, что в строке параметра нашей функции дата отде- 
лена от времени одним пробелом, однако допускается, что информации о вре- 
мени вообще может не быть. Далее, если время присутствует, секунды не обя- 
зательно должны указываться. Если параметр является пустой строкой или 
вообще отсутствует, то функция возвращает объект с текущей датой. 
РпсНоп шудже($дае){ 


Ш (угаае == ^""|| з1гаае == пи!) { 
гегигп пе Пае() 


} 


уаг азегдасе = вёгдаке. вр114 (" 
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1Е (азекгаабе. 1епаЕЪ == 1) 

азетааее[1] = "00:00:00" 
азегдаее[0] = азег@ааее[0].3р118(".") 
азЕгЯакеЕ1] = азекдаее[1].3р116(":") 
1Е (азбхЧафе[1] .1еваёев == 1) 

азсхЧасе[1] = пем Аггкау (азбг@абе [1] [0] , "00", "00") 
е1зе { 

1Е (азехдаке[1] .1епаЕв == 2) 

азехдаееЕ1] = пем Агкау (азегаасе [1] [0] , азегааее [1] [1] , "00") 

} 
теботп пем Рае (аз хабе [0] [2], азехааее[0] [1] -1, азехааее[0] [2], 
азсгЧасе [1] [0]. азегаасе [1] [1] , азегааее[1] [2]) 


} 
Заметим, что в действующем коде выражение с последним оператором гефиги не- 
обходимо написать в одну строку. 


С использованием функции тудаеО количество дней между двумя заданными 
датами можно вычислить следующим образом: 

Чафе1 = туда{е("10.2.2003") 

дае2 = туда{е("5 .3. 2003") 

Чауз$ = (Бае.рагзе(4а{е2) - Вае.рагзе(9а{е!))/1000/60/60/24 
Иногда в приложениях, в том числе и на веб-страницах, устанавливают часы (тай- 
мер), показания которых постоянно изменяются в соответствии с ходом систем- 
ных часов. Чтобы сделать это, требуется в цикле создавать объект даты и форми- 
ровать строку из компонент времени, используя подходящие для этого методы. 
Однако при этом программа, в которой имеется код, выполняющий роль часов, 
будет заниматься только этими часами (зациклится). Чтобы этого не произошло, 
используют метод зейщегуаюЮ из объектной модели браузера. Позднее мы рас- 
смотрим задачу создания часов подробно. 


1.7.6. Объект Воофеап (Логический) 


Объект Воо|еап создается с помощью выражения вида: 

переменная = пем Воо1еап(логическое значение) 
Он имеет свойство ргобо{уре, методы ®ю3@1т20 и значение ОГ (), которые имеют также 
объекты Зише и Митбег. 


Смысл свойства ргоюбуре мы уже рассматривали применительно к объектам Зиштя 
и Апау. Объект Воодфеап может понадобиться в том случае, когда всем логическим 
объектам, создаваемым с помощью выражения с ключевыми словами пе\ Воо]еап, 
нужно добавить новые свойства или методы с помощью прототипа (свойства 
ргообуре). 


1.7.7. Объект РипсНоп (Функция) 
Создание объекта РипсНоп 


Выше мы уже рассматривали стандартный способ определения функции: 
РАпсНоп имя _функции(параметры) { 
код 
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Существует и другой способ, основанный на выражении с ключевыми словами 
пем ЕипсНоп. Согласно этому способу функция создается как экземпляр объекта 
РипсНоп: 


имя_функции = пем ЕипсНоп ( ["пар!", [."парМ"]. "“оператор!; [ 


операТорМ]") 
Названия всех параметров являются строковыми значениями. Они разделяются 
запятыми. Заключительная строка содержит операторы кода тела функции, раз- 
деленные точкой с запятой. 
Вызов функции, определенной как экземпляр объекта Еипс Чоп, можно выполнить 
обычным способом: имя_функции(параметры). 


Примеры 
бтессапа1е = пем Рипсё1опт ("и1аеВ", "ре1900е", "уаг $ = м1 'Ве198е; 
тебаги в") 
Эгесбапе(2, 3) // возвращает 6 
уаг ехрг = "уаг $ = УЧ Ве; тебаги 5" 
Згес1ап2[е = пем Рипейоп("\а",, "ветер Е", ехрг) 
Эгестапе[е (2, 3) // возвращает 6 
а = "мат" 
Ь = "вед" 


ехрг = "уаг $ = ма й*пеанЕ; геигт 5" 

Эгефапо!е = пем РипсНоп(а, 6, ехрг) 

Згес{апа!е(2, 3) // возвращает б 
При любом задании функции, стандартном или с помощью ключевого слова пех, 
автоматически создается экземпляр объекта КипсИоп, который обладает своими 
свойствами и методами. 


Свойства РипсНоп 
1. аггатеп$ — массив значений параметров, переданных функции. 


Индексация элементов массива производится с 0. Поскольку это массив, он 
имеет свойства и методы объекта Аггау (в частности, свойство |еп? — длина 
массива). 


Свойство аггитеп($ применяется в теле определения функции, когда требуется 
проанализировать параметры, переданные ей при вызове. Например, можно 
узнать, сколько в действительности было передано параметров, не являются ли 
ихзначения пустыми ("", 0, пиП) ит. п. Это свойство особенно полезно при раз- 
работке универсальных библиотечных функций. 
Синтаксис выражения следующий: имя_функции.агеитеп 5. 
Пример 
Функция, приводимая в этом примере, возвращает строку, содержащую значе- 
ния параметров и их общее количество, которые были указаны в вызове функ- 
ции (а не в ее определении!). 

ТипсНоп туипс(а, Ь,с){ 


уаг аг]епй=щтуйшс.агоитеп{$ еп? /* количество переданных 
параметров */ 


уаг х= 
Юг (1=0; 1< шуйтс.агоитепте$ 1еп2®1+-+) { 
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х += туипс.агдитептт$ [1] + "," 
} 
теболхй х+"Всего: "+ муРапс.агдитепез.1епаЕв 


) 


ту ипс(5, "Вася") // "5, Вася, Всего: 2" 
му ипсо // "Всего: 0" 
муРипс(пийП,"" ,0,25) // "ПиН , ‚0,25 , всего: 4" 


2. Геп® — количество параметров, указанных в определении функции. 
Синтаксис: имя_функции. [еп 
В отличие от свойства агхитеп{$, количество параметров функции можно опре- 
делить в программе за пределами тела этой функции. 
Пример 
ТипсНоп туипс(а, Ь, с, а) { 
гефигп ту ипс.агдитеп{$.1епо {и 


) 
ту ипс(а.5) и 2 
туипс. [епо10 // 4 
3. саПег — содержит ссылку на функцию, из которой была вызвана данная функ- 
ция; если функция не вызывалась из другой функции, то значение этого свой- 
ства равно пи|. 
Совместимость: [Е4+, ММ4. 


Синтаксис: имя_функции. са|ег 
В свойстве имя_функции.саЦег содержится все определение функции, из кото- 
рой была вызвана функция имя_функции. 


Пример 


ТипсНоп #() { 
12() 


} 
ТипсНоп 12() 
а!ег{ (12 .саПег) // диалоговое окно со значением 12.саПег 


} 

ЕК) 
Вызов функции Й() приведет к вызову функции 1[2(), которая выведет на экран 
окно с сообщением, содержащим код определения функции В() (рис. 1.12). 


МТСТО5ОМ Пиегпеё Ехркие! Ш 


исвюп ИИ 
! 0 


Рис. 1.12. Результат выполнения функции #() — окно со значением {2.сайег 


Методы Рипсйоп 


{0511$() — возвращает определение функции в виде строки. 
Синтаксис: имя_функции.1о5Ыпд() 
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Иногда этот метод используют в процессе отладки программ с помощью диалого- 
вых окон. 
Пример 

Гапсиоп шуРпс(а, 5) { 

теги а*б/2 


! 
а!ет (ту ипс. тои тоаО) 
Результат выполнения последнего выражения показан на рис. 1.13. 


оф НЙ 1| 
И Мстозой бота ЕВОЙ ТОС 
у сбой глублос(, ВУ | 
У гебги а*Б/Р 


| 
| 
| 
МЕНЕ ЕЕ: 


Рис. 1.13. Результат выполнения аей(туипс о ип0()) 


арр!у( [текущий объект [, массив_параметров]]) 

са!!( [текущий объект [,пар![‚ пар2 [... парМ] ] ]]} 
Оба метода используются для вызова функции и дают одинаковые результаты. 
Отличаются они лишь формой представления параметров. Как известно, функ- 
цию можно вызвать просто по имени, за которым следует список параметров 
в круглых скобках. Особенностью этих методов является то, что с их помощью 
можно вызвать функцию по ссылке на нее. При первом чтении мы рекомендуем 
сначала ознакомиться с разделом 1.8, а. затем вернуться к данной теме, если в этом 
возникнет необходимость. 
Первый параметр обоих методов — ссылка на объект, являющийся текущим для 
данной функции. Ссылка на объект используется, когда вызываемая функция 
определена как метод пользовательского объекта. Более подробно эта тема об- 
суждается ниже, в разделе 14. 
Пример 


/* Функция-конструктор объекта саг (автомобиль)*/ 
Типсйоп саг(пате, тоае|, со!ог) { 


1115. пате = пате // название 
1115. тоае! = тоде // модель 
11$.Со[ОГ = СО0г // цвет 
{115.зПом/ = зпомсаг // метод, 


} 

/* Функция, вызываемая как метод объекта саг */ 

ТипсНоп  эпомсаг(){ 

а!ег{(171$.пате + "-" + {115.тоде!) // окно с сообщением 


Я 
/* Создание экземпляра объекта саг */ 
. тусаг = пем саг("Жигули", "ВАЗ2105", "мпКе") 


Обычный способ применения метода зНо\/ к объекту саг (вывод окна с сообщени- 
ем) выглядит так: 
шусаг.5Во\() 
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При этом в действительности вызывается функция $По\мсагО, заданная для этого 
метода. Текущий объект саг рассматривается как контекст для ссылок 5, ука- 
занных в теле функции. 


Однако методы арр|у() и са!О позволяют не связывать функцию $воусагО с объек- 
том тусаг. Более того, в конструкторе объекта сагможно не указывать выражение, 
определяющее функцию $Воусаг в качестве метода объекта. Вместо этого можно 
вызвать метод зпо\саг как объект и применить к нему метод саПО, указав в каче- 
стве параметра тусаг как текущий объект: 
звомсаг.са11 (мусаг) 

С помощью метода са@йО можно передавать параметры, отделенные друг от друга 
запятыми. Если параметры определены как элементы массива, то вместо саЩ) 
используется метод аррУО. 


1.7.8. Объект ОЩес+ 


ОБес{ является корневым объектом, на котором базируются все остальные объек- 
ты Тауабстрь такие как 5е, Апау, Оае ит. д. В программах можно создавать 
свои собственные объекты. Это можно сделать различными способами. 

Способ 1 


Типс оп имя_конструктора ([пар!,...[, парМ]){ 

код 

имяОбъекта = пем имя_конструктора( ["пар!",...[, “"парМ"]) 
Способ 2 


имяОбъекта = пем ОБ)есе() 
имяОбъекта.свойство = значение 


Способ 3 
имя Объекта = {свойство!: значение! |, свойство): значение) [№] } 


Для обращения к свойствам и методам объекта используется следующий синтаксис: 

ссылка_на_объект.свойство 

ссылка_на_объект.метод ( [параметры] ) 
Допустим, например, что нам требуется создать объект Сотрудник, который содер- 
жал бы сведения о сотрудниках некоторой фирмы, такие как Имя, Отдел, Телефон, 
Зарплата ит. п. В фирме может быть много сотрудников, но сведения о них пред- 
ставляются в некоторой единой структуре. Эту структуру можно создать с по- 
мощью конструктора объекта: 

ТипсНоп Сотрудник(Имя, Отдел, Телефон, Зарплата) { 

101$. Имя = Имя 

{015.Отдел = Отдел 

1115.Телефон = Телефон 

{115$.Зарплата = Зарплата 

} 
Как видите, конструктор объекта может быть представлен в виде определения 
функции. Ключевое свойство 1115$ представляет ссылку на текущий, то есть оп- 
ределяемый конструктором объект. Все операторы присвоения с 111$, расположен- 
ные в теле функции-конструктора, определяют свойства объекта. В круглых скоб- 
ках у имени объекта могут перечисляться параметры, чтобы иметь возможность 
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создать конкретный объект, являющийся экземпляром обезличенного объекта 
Сотрудник, и присвоитьего свойствам конкретные значения. Например, создадим 
конкретного сотрудника — азеОО?: 

асеОО? = пем Сотрудник(’Джеймс Бонд", 5, "223-332", 3600.50) 
Доступ к свойствам этого объекта производится обычным способом: 

аёет007.Имя // "Джеймс Бонд" 

адеп{007.Зарплата // 3600.5 
Информация о новом сотруднике добавляется аналогичным образом: 

$011г11{7 = пем Сотрудник("Максимов", 4, "123-4567", 4500.50) 
К свойствам и методам этого объекта обращаются довольно редко, и здесь мы не 
будем их подробно рассматривать. Отметим свойство ргофофуре, назначение кото- 
рого мы уже описывали применительно к объектам 5ишх и Аггау. Метод 1озит#О 
обычно используется при отладке программ с помощью диалоговых окон. Свой- 
ство ВазО\уупРгорегу("сВойсТВо") используется, чтобы определить, имеется ли у эк- 
земпляра объекта указанное свойство, определенное в его конструкторе (но не 
с помощью ргобобуре). Если да, то возвращается 1гие, в противном случае — ае. 


Более подробные сведения о создании объектов вы найдете в следующем разделе. 
Там приведено много примеров, и вы легко убедитесь, что понятие объекта не 
сложнее, чем понятие функции. 


1.8. Пользовательские объекты 


В предыдущем разделе мы рассмотрели встроенные объекты, то есть заранее пред- 
определенные в Лауа$спре и часто используемые в программах. С помощью выра- 
жений с ключевым словом пе\ вы можете создавать экземпляры этих объектов, 
то есть их конкретные воплощения. Более того, благодаря свойству рготофуре име- 
ется возможность добавлять к объектам новые свойства и методы, придуманные 
пользователем и отсутствовавшие в исходных встроенных объектах. В большин- 
стве случаев, в частности при создании сценариев для веб-страниц, всего этого 
более чем достаточно. Однако нельзя обойти вниманием возможность создания 
собственных объектов. Зачем нужны собственные объекты? 


Они не являются необходимыми для решения практических задач. С точки зре- 
ния программиста, объект представляет собой просто удобное средство организа- 
ции данных и функций их обработки. Чтобы как-то организовать данные и функ- 
ции в программе, далеко не всегда необходимо прибегать к такой конструкции, 
как объект. Ведь даже при внушительном количестве данных программист не все- 
гда организует их в виде массива (объекта Аггау): бывает достаточным ограничиться 
простыми переменными. 


В этом разделе мы сосредоточимся на том, как создавать объекты, если возникла 
такая необходимость. Возможно, это вам понадобится. Кроме того, данный мате- 
риал поможет лучше понять природу встроенных объектов, а также общую фи- 
лософию объектно-ориентированного программирования. Сейчас концепция 
объектно-ориентированного программирования является ведущей в техноло- 
гиях создания крупных приложений, поэтому будет полезно познакомиться 
с ней поближе. 
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1.8.1. Создание объекта 


Объекты вЛауазспрЕ можно создать несколькими способами. Мы рассмотрим три 
ИЗ НИХ. 


Первый способ основан на функции, в теле которой описываются все свойства 
и методы создаваемого объекта. Поскольку эта функция играет определяющую 
роль в создании объекта, ее называют функцией-конструктором или просто кон- 
структором объекта. Что, собственно, должен делать конструктор? Очевидно, он дол- 
жен ввести имя создаваемого объекта, а также его свойства и методы. Кроме того, он 
должен допускать возможность присвоения начальных значений свойствам. 


Имя функции-конструктора объекта является одновременно и именем создавае- 
мого объекта. Свойства и методы создаваемого объекта задаются в теле функции- 
конструктора с помощью операторов присвоения. При этом имена переменных- 
свойств записываются с ключевым словом 1115 (этот): {815.переменная. 


Рассмотрим в качестве примера функцию-конструктор, определяющую объект саг 
(автомобиль) со свойствами пате (название), то4е! (модель) и со]ог (цвет): 


Гипс оп саг(пате, то4е|, со1ог) { 


1815. паше = пате 
{015$.шоде!] = тод4е| 
{815.со1ог = со|ог 


} 
Эта функция определяет объект саг. Чтобы создать конкретный экземпляр объек- 
та саг, следует выполнить выражение с вызовом этой функции, которой можно 
передать значения параметров. Мы уже знаем, что экземпляр объекта создается 
с помощью оператора присвоения с ключевым словом пе\: 


тусаг = пем саг("Ока", "ВАЗ1.1.11", "мАКе") 
Итак, мы создали объект тусаг, являющийся экземпляром объекта саг. Таких эк- 
земпляров с различными именами можно создать несколько. Значения свойств 
объекта тусаг можно изменять в программе: 

// значение равно "ВАЗ1111" 
1 // значение равно "Ока" 

тусаг.то@е! = "ВАЗ11113" // значение равно “ВАЗ11113" 
Как видите, объект — это просто особый способ группировки данных и их исполь- 
зования (составное имя переменной: объект.свойство). 


Объекты можно создавать и с помощью конструктора пе\ ОШес{О: 


тусаг = пем ОБес{О 
ппусаг.пате = "Ока" 
тусаг.тоде! "ВАЗ1111" 
тусаг.со!ог = "миКе" 


В этом способе отчетливо видно: создаваемый объект является экземпляром объ- 
екта ОЦест, подобно тому как, например, создаваемый массив является экземпля- 
ром объекта Аггау. 
Допускается также и следующая компактная запись определения объекта: 

тусаг = {пате:"Ока", то4е!:"ВАЗ111", со|ог: "мпе"} 
Здесь все определение свойств заключается в фигурные скобки. Пары свойство= 
=значение разделяются запятыми, а имя свойства отделяется от значения двоето- 
чием. 
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При создании объекта мы можем задать значения свойств по умолчанию, то есть 
значения, которые будут иметь свойства, если при создании экземпляра этого объ- 
екта значения его свойств не указаны явным образом (то есть имеют значения 
паП, Оили""). Это делается с помощью логического оператора ИЛ И (обозначаемо- 
го |) в конструкторе объекта в виде функции: 


ТипсНоп саг(пате, тоде|, со!ог) { // конструктор объекта саг 
{115.пате = пате || "неизвестно" 
{115.тоаде! = тоде! || "неизвестно" 
111$. соГог = со!ог | | "Баск" 
} 
тусаг = пем. с -.аг("Жигули")"" // создание экземпляра тусаг объекта саг 
зи // "Жигули" 
// "неизвестно" 
//_ "Баск" 


1.8.2. Добавление свойств 


Если возникает необходимость добавить новое свойство к существующему объек- 
ту, а также ко всем его экземплярам, то это можно сделать с помощью свойства 
рготобуре. В приведенном ниже примере мы создаем объект саг (автомобиль), за- 
тем его экземпляр тусаг, а затем добавляем к свойству ргобобуре свойство о\/пег 
(владелец) с конкретным значением: 

РАпсйоп саг(пате, то4е|, соог) { // конструктор объекта саг 


1115.паше = пате | "неизвестно:" 
{115.шоде]. = тоде! | "неизвестно" 
1815.со10г = со]ог "Ыаск" 
шусаг = пем саг“ ли",""),"" /* создание экземпляра тусаг 
объекта саг */ 
шусаг.пате и“ ли" 
| | | // "неизвестно" 
// "Баск" 
уре. оупег = "Иванов" // добавляем новое свойство 
е! // "Иванов" 


Если нужно добавить новое свойство только к конкретному объекту (к данному 
экземпляру объекта), то это можно сделать просто с помощью оператора присво- 
ения: 

имяОбъекта.новое свойство = значение 


В следующем примере мы создаем объект саг вообще без свойств, а затем добав- 
ляем его экземпляры и кним — различные свойства. 


РипеНоп саг(){} 
шусаг1 = пем саг() 
пусаг2 = пем саг() 
шусаг]1.паше = "Жигули" 
пусаг2.шоде1 = "ВАЗ2106" 


шусат!1 .паме // "Жигули" 
усаг1 // ипдеЕ1пея (ве определено) 
аш // ораеЕ1теая (ее определено) 


пусаг2 .шоде1 //  "ВАЗ2106" 
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1.8.3. Связанные объекты 


В объекте в виде свойства может содержаться ссылка на другой объект. В этом 
случае оба объекта оказываются связанными: один из них оказывается подобъек- 
том или, другими словами, свойством другого. Например, мы можем создать объ- 
ектрвото, содержащий в качестве своих свойств название автомобиля и ОВГ-адрес 
файла с его изображением. Такой объект можно связать с объектом саг, содержа- 
щим основную информацию об автомобилях, добавив к нему свойство, значени- 
ем которого является ссылка на объект рвото. 


Ниже приведены конструкторы объектов саги рвото. Чтобы добавить объект рНоо 
в объект саг, мы добавили в объект саг свойство, значением которого является ссыл- 
ка на объект рвото. 
Рапсйоп саг(пате, тоде|, со]ог, рвою) { // конструктор объекта саг 
(115. паше = пате 


{115.шо@е! = тоае1 
(11$. со!ог = со[ог 


1115. рвофо = рПо{о // ссылка на объект рпофо 

> 

ГапсНоп рЮо (паше, иг!) { // конструктор объекта рНоо 
+11 $.пате = пате 
61$ . ше = иг! 


} 


Создадим пару конкретных объектов, являющихся экземплярами объекта рво\{о: 
рпо{о!| = пемрпофоС'ОКа", "/тадез/ока!.] рад”) 
рпою2 = пемрпоюС’'ОКа" ‚, “Лтадез/ока2 . 9!” ) 

Теперь создадим экземпляры объекта саг: 


тусаг = пем саг("Ока", “ВАЗ1111". "миме". рпото|) 

тусаг. рпото. иг! // “"/1тадез/ока!. рад" 
тусаг. то4е! // “"ВАЗ1111" 

шусаг = пе\м саг("Ока”, "ВАЗ1111", "уйКе", рЮо1о2) 

тусаг.рвНофо. иг! // “"/тадез/ока2. 91!" 
тусаг.то4е! // “ВАЗ1111" 


Обратите внимание: чтобы узнать значение ОКГ-адреса расположения файла 
с картинкой, относящейся к объекту тусаг, мы обращаемся к свойству иг Г. объекта 
рпото, который сам является свойством объекта тусагили, другими словами, под- 
объектом объектатусаг. 


1.8.4. Пример создания базы данных 
с помощью объектов 


Теперь рассмотрим пример создания базы данных автомобилей, находящихся на 
одной стоянке. Список всех автомобилей можно представить в виде таблицы со 
столбцами: паше (название), то4е (модель), гегиит (номер), о\’пег (владелец) 
и рВофо (фотография). Будем считать, что на фотографии номер автомобиля не 
показан, так что она отображает не конкретный автомобиль, а его тип (название, 
модель и цвет). Конечно, можно создать базу данных в виде одной таблицы, одна- 
ко мы поступим иначе и создадим две таблицы. Одна из них будет вспомогатель- 
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ной и выполнять роль справочника типов автомобилей, а другая таблица будет 
содержать записи о конкретных автомобилях, находящихся на стоянке или, точ- 
нее, приписанныхкней. 


Справочник типов автомобилей будет содержать наиболее общие сведения об 
автомобилях: название, модель и фотографию (точнее, ОЧКГ-адрес ее файла). На 
стоянке может находиться несколько автомобилей одного типа (например, «Жи- 
гули», ВАЗ2101 белого цвета), но в справочнике этот тип будет упомянут лишь 
один раз. В нашей базе данных справочник типов автомобилей будет представ- 
лять объект геЁ 


ТипсНоп гек(пате, тоде, и\) { /* конструктор справочника 
типов автомобилей */ 
15.пате = пате // название марки автомобиля 
{115.то4де! = тоде // модель 
4$. иИ = ий // ЧУВЕ-адрес файла с фотографией 


} 


Заполним справочник конкретными записями. Множество всех таких записей 
удобно определить как массив (назовем его агеР). Тогда элементы этого массива 
определим как экземпляры объекта теЁ 


аге! = пем Аггауо // массив записей справочника типов автомобилей 
аге! [0] = пем гекК“Жигули",, 191 { { 

аге! [|] = пем ге! (“”Жигули", "Ваз2106", “рёси. 9”) 

аге![2] = пем ге|(“Всмига", "ГАЗ24", “р!с12.9") 

аге! [3] = пем гек“ОКа", "ВазИИ", “р!с{3.91”) 


В нашем справочнике описаны только четыре типа автомобилей. 
Теперь создадим список всех автомобилей на стоянке. Этот список удобно офор- 
мить как массив, каждый элемент которого представляет запись о конкретном 
автомобиле. Формально элементы этого массива мы определим как экземпляры 
объекта <аг- который будет содержать ссылку на справочник — объект геЁ. 
Итак, сначала напишем код функции-конструктора объекта саг: 

Типсйоп саг(гедпит, омтег, ге { 


{115.гедпит = г // номер автомобиля 
{115.омпег = омтег // владелец 
и з.геЁ = ге // ссылка на справочник 


} 


Далее создадим записи о конкретных автомобилях на стоянке. Массив записей 
назовем асаг: 


асаг = пем Аггауо 

асаг[0] = пе\м саг("АТ2ЗВХ Е #[1]) 

асаг[1] = пем саг("М345СТ", "Петров", аге![!]) 

асаг[2] = пем саг("Еб78СА",, у [9] ) 
асаг[3] = пем саг ("КО560Х", "Михайлов", аге{[2]) 
асаг[4] = пем саг ("К895МХ", "Дунаев", аге![3]) 

асаг[5] = пем саг ("РЗ40НУ", "Павлов", аге![2]) 

асаг[6] = пем/ саг ("03210К", "Николаев", аге![2]) 


В нашем списке всего 7 записей. Модель ВАЗ2106 в нем встречается два раза, 
ГАЗ24 — три раза, а остальные — по одному разу. Если бы мы создавали базу дан- 
ных без справочника, то нам пришлось бы многократно повторять одни и те же 
данные при определении массива асаг. 


Далее приводятся примеры обращения к свойствам нашей базы данных: 
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асаг[4].ге{.тоае! // "ВАЗТИ" 
асаг[3] . ге!.пате // "Волга" 
асаг[3].оммпег // "Михайлов" 


Поскольку база данных представляет собой массив, с помощью методов объекта 
Аггау можно организовать фильтрацию (выборку) записей по тому или иному кри- 
терию. Попробуйте сделать это самостоятельно. 


Базу данных, создание которой мы рассмотрели выше, можно отобразить на экране 
монитора в окне браузера. Для этого необходимо прежде всего создать НТМГ- 
программус таким элементом, как таблица. Напомним, что таблица определяется 
тегами <ТАВГЕ>, <ТВ>, <ТН>, <П» и др. Вы можете создать в НТМГ-программе раз- 
дел, обрамленный тегами <ЗСЕРТ> и </ЗСВТРТ>, между которыми разместить рас- 
смотренный выше код на языке Лауа5спреЕ. А далее есть два пути. 


. Вручную написать теги таблицы. Если количество строк в таблице невелико, 
то именно так и следует поступать. 


. _ Написать программу на Лауа$ ст!р®, генерирующую нужную последовательность 
тегов и данных как строку, а затем воспользоваться методом \тиеО объекта 
4оситепЕ для ее записи в текущий НТМГ-документ и исполнения браузером. 
Этот способ интереснее и предпочтительней, если таблица содержит много 
строк. Небольшой объем кода обеспечивается тем, что формирование строки 
с НТМГ-кодом происходит в цикле. К этому располагает то, что строки (запи- 
си) нашей базы данных определены в виде массива. 


В листинге 1.1 приведен НТМГ-код, содержащий только сценарий. Для упроще- 
ния ситуации мы формируем таблицу только с тремя столбцами. Мы не обращша- 
ли внимания на дизайн таблицы, определяемый специальными атрибутами 
тегов (рис. 1.14). 


: лены на 
базаданных автомобилей - М'сгозой мегпе! Е жрЁ.. | | Хх] 
ай! Правка Вид Избраннов Одб8ис Справка 


4 *] 7 | 

Остановить Обновить Данюй 

ЕР Е еее - - - | 

Адрес | ] С \Мои дерумектьЛпрммеры 11111, х> Перекод Селен ”” | 


Название;| Номер Шладелец! 
Жигули |А!12зВхХ |Иванов Т 
1(Жигули... 1] М345СТ Щегров 
Жигули 7Е678СА |Сндоров | 
Волга Що5бОХ Михайлов 
Ока РК895МХ' {Дунаев 
'Вола  |РЗ4ОНУ" Шавлов 


зашллу-- 


Полга  |53210К "Николаев а 


= | Готово | |9) Моикомпьютер | 


Рис. 1.14. Так выглядит база данных автомобилей в окне браузера 
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Листинг 1.1. Код для отображения базы данных автомобилей в браузере 


<НТМе> 

<НЕАО><ТЛТ1_Е>База данных автомобилей</Т1Т1Е></НЕАО> 

<$СЕТРТ> 

/* Конструкторы */ 

ТипсНоп ге(патЁ } Ч"! ) { /»> конструктор справочника 
типов автомобилей */ 

+115.пате = пате // название марки автомобиля 

+11$.тоде! = тоаде! // модель 

УВТ$.циЁ = иг! // ЧВГ-адрес файла с фотографией 

} 

Рапсйоп ем п, о\пег, тер) /* конструктор списка 
автомобилей на стоянке */ 

ит = гер! // номер автомобиля 
+115 .омпег = омпег // владелец 
ге = ге // ссылка на справочник 


/* Собственно база данных 


аге{ = пем Аггауо // массив записей справочника типов автомобилей 
аге![0] = пем ге!("Жигули",, “Ваз21( | { 

аге! [1] = пемге# ( "Жигули", "Ваз2 106" ,"риусЕГ. ди" } 

агеЁ [2] = пем геР (Во ГАЗЖ", АЗ24 р1с12 { 

аге{! [3] = пем геф ("Ока". “"ВазПП", "р!с{3.9") 


асаг = пем АтауО 

асаг[0] = пеу саг ( "А123ВХ", "Иванов", аге{ [11) 

асаг[1] = пем саг ( "МЕСТ арЕ, "Петров", агет[!]) 

асаг[2] = пе\м саг ( "Еб78СА", “Сидоров”, аге{[0]) 

асаг[3] = пем саг ( "К956ОХ", "Михайлов", агеГ [2]) 

асаг[4] = пем саг( "юн", "Дунаев", аге{[3]) 

асаг[5] = пе\м саг ( 'Р®Н/’Плв, "Павлов", агеё [2]) 

асаг[6] = пе\м саг( "03210К", "Николаев", аге{![2]) 

Та - АВЕ ВОКОЕВ=1> <ТВ>“” 

$гТаб6 += "<ТН>Название</ТН><ТН> Номер</ТН> <ТН>Владелец</ТН></ТВ>" 
/^ Формирование строк таблицы */ 
Гог(1=0;1<=асаг.1епа+й-1;1++) { 

з4гТаб += “<ТА><ТО>." + асаг[1] ге! Г: Т +аса 
зиТаб += "</ТО><ТО>" + асаг[!].омпег + “</ТО></ТВ>" 


згТаь += "</ТАВЬЕ>" 
10Си Е. 1 { . записываем строку $гТаб 


в НТМЕ-документ и выполняем его */ 
</5СВРТ> 


<ИНТМЕ> 
Здесь в теле оператора цикла Юг мы использовали разновидность оператора при- 
своения +=. Напомним, что выражениех += у эквивалентно выражению х=х-+у. 
Мы дважды использовали выражение с этим оператором только лишь для того, 
чтобы выражение справа от него не было слишком длинным. 
Мы могли бы включить в отображаемую таблицу и другие столбцы. Например, 
для отображения фотографий автомобилей достаточно добавить в строку $ Таб 
следующий фрагмент: 

"СТОИМ 94 = “ + абаг [1]. териг + 
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1.9. Специальные операторы 


В этом разделе описываются операторы, которые при программировании наТауа- 
ЗсирЕ используются относительно редко. Возможно, они вам когда-нибудь по- 
требуются. Именно поэтомуя и включил в книгу данный раздел. Новички могут 
пока пропустить его. 


1.9.1. Побитовые операторы 


Побитовые (поразрядные) операторы применяются к целочисленным значениям 
и возвращают целочисленные значения. При их выполнении операнды предвари- 
тельно приводятся к двоичной форме представления, в которой число является 
последовательностью из нулей и единиц длиной 32. Эти нули и единицы называ- 
ются двоичными разрядами, или битами. Далее производится некоторое действие 
над битами, в результате которого получается новая последовательность битов. 
В конце концов эта последовательность битов преобразуется к обычному целому 
числу — результату побитового оператора. В табл. 14 приведен список побито- 
вых операторов. 


Таблица 1.4. Побитовые операторы 


Оператор Название Левый операнд Правый операнд 
К Побитовое «и» Целое число Целое число 
Побитовое «или» Целое число Целое число 
Побитовое исключающее ‘Целое число Целое число 
«ИЛИ» 
Побитовое«не» Целое число 
Смещение влево Целое число Количество битов, на которое 
производится смещение 
Смещение вправо Целое число Количество битов, на которое 
производится смещение 
Заполнение нулями при Целое число Количество битов, на которое 
смещении вправо производится смещение 


Операторы &, |," и - напоминают логические операторы, но их область действия - 
биты, а не логические значения. Оператор - изменяет значение бита на противопо- 
ложное: 0 на Та 1 — на 0. В табл. 15 поясняется, как работают операторы &, |, ". 


Таблица 1.5. Работа операторов &, |, 


х у Х8У ХУ ху 
1 | | | 0 
1 0 0 1 | 
0 | 0 | | 
0 0 0 0 0 
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Например, 2&3 равно 2, а2(3 равно 3. Действительно, в двоичном представлении 2 
есть 10, а3 — 11. Применение побитовых операторов даст в случае оператора & 
двоичное число 10, то есть десятеричное число 2, а в случае оператора | — двоич- 
ное число И, то есть десятеричное 3. 

У операторов смещения один операнд и один параметр, указывающий, на какое 
количество бит следует произвести смешение. Например, `` «2 равно 12, потому 
что смещение влево на два бита двоичного числа (десятеричное 3) дает 1100,), 
что в десятеричной форме есть 12. Результат вычисления выражения 6»2 — 1. 
Действительно, число 6 в двоичной форме это 110; смещение его вправо на два 
бита дает | как в двоичной, так и в десятеричной форме. 


1.9.2. Объектные операторы 


Оператор удаления свойств объекта (чеще) 


Удалить свойство объекта, а также элемент массива можно с помощью оператора 
деве. Обычно этот оператор используют для удаления элементов массива: 
еее элемент 


ВНИМАНИЕ - 


При удалении элемента массива удаляется и его индекс, но оставшиеся элементы сохра- 
няют свои прежние индексы, а длина массива не изменяется. 


Пример 
туаггау = пем Аггау( "а", "Б”. "с", "@ ")} 
туаггау.1епд{ И // 4 
деве туаггау[П 
туаггау.1епо {п // 4 
туаггау [0] ДИ». 
| // апдейпеа 
туаггау[2] // 
туаггау [3] ДЕ. “Ч 


Использование оператора ае!“е не приводит к немедленному освобождению па- 
мяти. Решение об освобождении памяти принимается так называемым ядром 
Тауазсире, а пользовательская программа лишь создает к этому предпосылки, но 
не может контролировать этот процесс абсолютно. 


Оператор проверки наличия свойств (т) 


Этот оператор позволяет проверить, имеется ли некоторое свойство или метод 
у того или иного объекта. Левый операнд представляет собой ссылку в виде стро- 
ки на интересующее нас свойство или метод, а правый операнд — объект. Ссылка 
на метод содержит лишь его название без круглых скобок. Если свойство или ме- 
тод содержится в объекте, то возвращается {гие, иначе — Ё5е. Отсюда следует, 
что оператор ш можно применять в условных выражениях (в операторах 1, з\ЕсП, 
Юг, Пе, 40-е). 


Примеры 


1. Например, объектаоситеп, представляющийзагруженныйв браузер НТМГ-доку- 
мент, имеет метод утиеО. Чтобы убедиться в этом, следует написать выражение 
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"утце” ш 4оситет // значение равно ‘гае 
2. Создадим объект и проверим наличие в нем некоторых свойств. 


ТипсНоп Сотрудник (Имя, Отдел, Телефон, Зарплата) { 
1115.Имя = Имя 

1115.Отдел = Отдел 

1115.Телефон = Телефон 

1115.Зарплата = Зарплата 


) 
адеп{007 = пем Сотрудник( "Джеймс Бонд", 5, "223-332") 


"Телефон" т адеп{007 // чгие 
"Ученая степень” шт адепт{$07 // Та!зе 


Оператор ш поддерживается браузерами 1Е5.5+,ММ6+. 


Оператор проверки принадлежности объекта 
модели (т$апсеот) 


Этот оператор позволяет проверить, принадлежит ли некоторый объект объект- 
ной модели ЛауаЗсире. Левый операнд представляет проверяемое значение, 
а правый — ссылку на корневой объект, такой как Аггау, Эт, Рае ит. п. Вы- 
ражение с оператором 1п5{апсео{ возвращает {гие или !а5е и, таким образом, 
может использоваться в условных выражениях (в операторах 1, змисВ, Юг, \НВШе, 
4о-\ВПе). 
Пример 
Созданный массив является экземпляром объекта Аггау, а последний сам являет- 
ся экземпляром корневого объекта ОБесе. 

гпуаггау = пем Аггаубо 


пуатау шзапсео{ Аггау // тгче 
Аггау тзфтапсе ОБ] Рс: // гие 
Муаггау шз{апсео Зита // Тазе 


Оператор ш поддерживается браузерами 1Е5.5+, ММ6+. 


1.9.3. Комплексные операторы 
Оператор условия (?:) 


Этот оператор является сокращенной формой оператора условного перехода Н... 
е15е... Его так и называют: оператор условия. Обычно он используется вместе 
с оператором присвоения одного из двух возможных значений, в зависимости от 
значения условного выражения. Синтаксис оператора условия следующий: 
условие ? выражение! : выражение? 
С оператором присвоения оператор условия имеет такой вид: 
переменная = условие ? выражение! : выражение? 
Оператор условия возвращает значение выражения выражение!, если условие ис- 
тинно, в противном случае — значение выражения выражение2. 
Пример 


4 = пем Бате() 
х = а.де)0аз{ео 
{уречае = (х%2 == 0)&&(х > 1) ? "четное" : "нечетное" 
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Если бы в]ауа5сп!ре не было оператора условия, то пришлось бы написать функ- 
цию, которая работала бы как оператор условного перехода {, но, в отличие от 
него, возвращала значение. Вот пример этой функции: 
ФипсНоп 11+(с`сопа Нот, ехрг|й, ехрг2){ 
И (сопантоп) 
теигп еуа|(ехрг!) 


е1зе 
геаги  еуаКехрг2) 


Для данной функции нельзя было выбрать название Ёй, поскольку это ключевое 
слово. Потому было взято наиболее близкое к нему. Обратите внимание: предпо- 
лагается, что выражения передаются функции как строки, содержащие выраже- 
ния. Однако допустимы значения и других типов. 


Оператор определения типа (преот) 


Этот оператор используется для проверки, относится ли значение к одному из 
следующих типов: $1, питбег, Боо]еап, обес, РапсНйоп или ипаейпе4. Значение, 
возвращаемое оператором 1уреоЁ, является строковым. Оно содержит одно из пе- 
речисленных выше названий типа. Единственный операнд пишется справа от клю- 
чевого слова {уреор. 


Примеры 


уаг х 
п=3.14 

№ = пем МитЬег(3.14) 

$ = "Привет всем!" 

а =пем Аггау(1, 2, 3, 4, 5) 
ТипсНоп +(){} 


1уреоЁ х 
{уреоЁ п 
1уреоЁ М 
ТуреоЁ $ 
{уреоЁ а : | 

Туреот 1 // “ипсНоп” 


' 


"питбег" 


1.10. Приоритеты операторов 


Выше мы уже говорили, что в выражениях операторы выполняются в порядке, 
определяемом с помощью круглых скобок, согласно приоритетам; операторы 
с одинаковыми приоритетами выполняются слева направо. В этом разделе мы 
уточним приоритеты всех операторов (табл. 1.6). 


Круглые скобки, с помощью которых можно установить любой порядок выпол- 
нения операторов в выражении, можно считать операторами. Они обладают наи- 
высшим приоритетом. Эти скобки могут образовывать структуру вложенности. 
Выражения, заключенные во внутренние круглые скобки, выполняются раньше 
тех, которые заключены во внешние круглые скобки. Интерпретатор ЛауаЗсг!ре 
начинает анализ выражения именно с выяснения структуры вложенности пар 
круглых скобок. 
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На втором месте по приоритету находится вычисление индексов массивов и оп- 
ределения самих элементов массивов. Индексы массивов, как известно, заключе- 
ны в квадратные скобки. 


На последнем месте находится запятая, как разделитель параметров. 


полиция 1.6. Распрелеление операторов ло приоритетам ы 


риоритет ператор омментарий 


! о От внутренних к внешним 
| Значение индекса массива 
ТипсНоп() Вызов функции 
Логическое«не» 
Побитовое «не» 
Отрицание 
++ Инкремент (приращение) 
Декремент 
пем 
Туреот 
Уоа 
аеее Удаление объектного элемента 
Умножение 
Деление 
Деление по модулю (остаток от деления) 
4 + Сложение (конкатенация) 
ре Вычитание 


= Побитовые сдвиги 


Меньше 
Не больше (меньше или равно) 
Больше 
Не меньше (больше или равно) 
Равенство 
Неравенство 
В & Побитовое «и» 
9 ы Побитовое исключающее «или» 
10 | Побитовое «или» (дизъюнкция) 
и && Логическое «и» (конъюнкция) 


12 | Логическое «или» 
_ _ продолжение =” 
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Таблица 1.6 (продолжение) 


Приоритет Оператор Комментарий 
13 ? Условное выражение (оператор условия) 
14 = Операторы присвоения 
/= 
%= 
&. 
о, 3 а п я т а я (разделитель параметров) 


Кроме приоритетов следует также учитывать, что сложные логические выраже- 
ния, состоящие из нескольких более простых, соединенных операторами И и ИЛИ, 
выполняются по так называемому принципу короткой обработки. Это означает, 
что значение всего выражения бывает можно определить, вычислив лишь одно 
или несколько более простых выражений, не вычисляя остальные. Например, 
выражение х&&у вычисляется слева направо; если значение х оказалось равным 
а6е, то значение у не вычисляется, поскольку и так известно, что значение 
всего выражения равно Ё@Ке. Аналогично, если в выражении х | у значение х 
равно (тие, то значение у не вычисляется, поскольку уже ясно, что все выраже- 
ние равно (гие. 


ВНИМАНИЕ 


Если вы хотите проверить правильность сложного логического выражения, то необходимо 
проверить отдельно все его составные части. Если какая-нибудь составная часть выраже- 
ния содержит ошибку, то она может остаться невыявленной, поскольку эта часть выраже- 
ния просто не выполнялась при тестировании. 


1.11. Зарезервированные ключевые слова 


Ключевые слова Лауазсирь, применяемые для обозначения элементов синтакси- 
са языка, а также другие, зарезервированные на будущее, нельзя использовать 
в качестве имен переменных, функций и объектов (табл. 1.7). В крайнем слу- 
чае можете просто несколько модифицировать ключевое слово, изменив ре- 
гистр, добавив какой-нибудь префикс (например, символ подчеркивания) или 


суффикс. 
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Слово ищегасе является ключевым — и, следовательно, его нельзя использовать 
в качестве имени пользовательского объекта или функции. Однако можно при- 
менить некоторую модификацию этого слова: туйщегсе, хииет@сеи т. п. 


ВНИМАНИЕ 
Использование символов в различном регистре часто приводит к недоразумениям, обус- 
ловленным тем, что одна и та же по вашему замыслу переменная из-за небрежности встре- 
чается в программе в различном регистре. Поскольку уамаЗсир+ является регистрозависи- 
мым языком, он воспринимает эти переменные как различные. 


Если вы хотите использовать различный регистр в именах, то придерживайтесь 
определенных правил. Например, только первый символ имени всегда является 
прописной буквой. 


СОВЕТ 
Следует также иметь в виду, что со временем список зарезервированных ключевых слов 
может расширяться. Чтобы ваши сценарии не перестали работать в будущем, подбирайте 
имена для своих объектов из специфических (не общеупотребительных) слов. 


Таблица 1:7. Список ключевых слов _ — А и 


абз{гас{ ее а зирег 
росеап ежепа$ и\еГасе МСП 
Бгеак Та!5е [е)ат®] зупсигопмечд 
Буе Нпа! паНме 1015 
сазе НпаНу пем ТАГОМ/ 
са{сп Ноа{ Пий 4Агом$ 
спаг Юг раскаде тгапуеп{ 
са$$ ТипсНоп риуме 1гие 
сопз+ доо римесеа {гу 
сопипие И рус {уреот 
Четаий третет$ гезе{ \уаг 
еще трой гаигп Ме 

[6] [а вом мийе 


ЧоцЫе ш$апсео? ры айс _ МИП 


Глава 2. Основы создания 
сценариев 


В этой; главе мы начнем с краткой истории программирования, а затем рассмот- 
рим основные понятия, объекты ТауаЗсирй и приемы работы с ними. Их нужно 
освоить, прежде чем заниматься более узкими задачами. В главе 4 вы познакоми- 
тесь с конкретными примерами сценариев, но чтобы научиться решать задачи, 
выходящие за рамки конкретных примеров, прочитайте данную главу. В этом слу- 
чае вы с легкостью и с интересом усвоите справочный материал, изложенный 
в главе 3. 


2.1. Из истории программирования 


Давным-давно, примерно с 1950 по 1960 год, в программировании не было сколь- 
ко-нибудь явно выраженных технологий. Не существовало понятия вызова функ- 
ции, данные хранились где попало, для управления вычислительным процессом 
широко использовались операторы перехода, в том числе и оператор СО ТО (пе- 
рейти туда, кудая сказал). Программные коды были огромными, содержали мас- 
су ошибок и стоили очень дорого. Операторы СО ТО бросали читателя исходных 
текстов то вверх, то вниз по листингу исходного текста программы. Отладка про- 
грамм занимала львиную долю всего времени разработки. Тогда программирова- 
ли в цифровых кодах команд, а переход к языку мнемокодов АззетЫег казался 
этапом значительной автоматизации работы программистов. Нормой производи- 
тельности труда программистов было 3-5 команд в день. В действительности про- 
граммист за месяц писал тысячи кодов, хотя результат состоял всего лишь из не- 
скольких их десятков. А зачем он это делал, если ему платили по норме? В те 
романтические годы программистом мог быть только специалист по вычислитель- 
ной технике. При этом программисты, как правило, были еще и математиками. 
Математиками их называли до середины 80-х годов прошлого века независимо от 
того, имели они специальное образование или нет, понимали ли они хоть что- 
нибудь в этой изящной и прекрасной науке или нет. 


В период с 1960 по 1975 год появились первые функциональные языки програм- 
мирования, такие как ЕОКТКАМ и АГСОГ. Эти языки в основном предназнача- 
лись для поддержки формульных вычислений, необходимых ученым и инжене- 
рам. Расчет траекторий орбит космических аппаратов и планет, создание программ 
наведения антенн, прогноз погоды и параметров электронных схем — далеко не 
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полный перечень задач, обслуживаемых программными языками данного типа. 
Эти языки позволяли создавать функции, что ускорило создание более объемных 
программ. Однако операторы СО ТО по-прежнему изобиловали в программах, их 
отладка, как и раньше, оставалась трудоемким и длительным делом, а мысль о 
необходимости структуризации данных и собственно программ только зарожда- 
лась. В это же время возникли первые операционные системы. 


В конце 70-х годов стало ясно, что программы и данные должны иметь четко вы- 
раженную структуру, чтобы их можно было быстро разрабатывать, отлаживать, 
модифицировать и интегрировать с другими программными комплексами. На эту 
тему написаны сотни книг и статей. Тема публикаций и дискуссий — структур- 
ное программирование. Оно в итоге значительно улучшило качество программ- 
ных продуктов. РГ/Ти С — наиболее типичные и знаменитые языки структурно- 
го программирования. Появилась возможность создавать сложные структуры 
данных с помощью средств языка. Например, программист мог создать структуру 
Автомобиль для хранения в ней всехнеобходимыхданныхоб автомобиле: марки, 
номера, цвета, имени владельца и т. п. При этом все данные хранились в одном 
месте, а не рассеивались по множеству переменных. Те, кто знаком с программи- 
рованием баз данных, могут удивиться: а что тут особенного? Одно дело сохра- 
нять данные в соответствии с некоторой структурой на диске, а другое — обеспе- 
чивать поддержку структуры на уровне языка. 


С 1990 года началась эра так называемого объектно-ориентированного програм- 
мирования (ООП). По существу, ООП основывается на расширении концепции 
структуры. Если раньше в структуре хранились лишь статические данные, то те- 
перь стало возможным хранить и описания активных элементов, называемых ме- 
тодами. Такие структуры в языках ООП называются классами, или объектами. 
Методы объекта описывают его поведение. Например, разрабатывая компьютер- 
ную игру, программист может создавать объекты для всех ее персонажей. Кроме 
статических характеристик (имя, внешний вид, координаты положения), объект 
может содержать и описания методов изменения положения, своего внешнего вида 
и реакции на действия игрока. Другими словами, объект представляет собой не- 
кий контейнер, содержащий переменные и функции, которые применительно 
к объекту называются его свойствами и методами. Замечательно еще и то, что 
в языках, поддерживающих ООП, из одних объектов можно делать другие, до- 
бавляя к ним новые свойства. При этом созданные таким образом новые объекты 
наследуют свойства исходных (родительских) объектов. Например, объект Сту- 
дент наследует свойства объекта Человек, а последний наследует свойства объекта 
Млекопитающее. Благодарямеханизмунаследованияпрограммист освобождается 
от необходимости повторять историю создания новых объектов начиная от 


Адама. 


Самый известный и широко используемый язык ООП — С++. Язык С (просто 
Си) — мощный, но низкоуровневый язык программирования. В нем есть все не- 
обходимое для создания объектов, однако ответственность за это полностью ло- 
жится на программиста. Язык С++, напротив, большую часть рутинной работы 
по созданию объектов (классов) берет на себя. Существуют и другие объектно- 
ориентированные языки (например, Лауа и ОБесЕ Разса!), но С+- стал стандар- 
том ООП-языка де-факто. Если какой-либо язык так или иначе поддерживает то 
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же, что и С++, то говорятх, что это ООП-язык. Однако не все языки, поддержива- 
ющие работу с объектами, являются ООП-языками в полной мере. Это, по суще- 
ству, означает, что они поддерживают не все механизмы работы с объектами, ко- 
торые имеются в С++. Так, например, Лауазспр{ не вполне ООП-язык, поскольку 
его последняя версия 15 не поддерживает концепцию наследования свойств объ- 
ектов в том объеме, в каком это реализовано в С++. Заметим при этом, что следу- 
ющая версия ЛауаЗстри, как ожидается, уже будет полностью соответствовать 
концепции ООП. 


Не для всех программистов, воспитанных на идеях функционального и структур- 
ного программирования, переход к ООП был гладким и естественным. В начале 
90-х годов появляется множество популярных книг, авторы которых пытались 
с помощью простых аналогий из повседневной жизни объяснить суть объектов. 
Обычно в качестве примеров приводились магнитофоны и микроволновые печи 
с кнопками и регуляторами, которые должны были проиллюстрировать идею 
свойств и методов. Признаюсь, мне тоже было нелегко освоить новую филосо- 
фию программирования. Вместе с тем я видел, как новички без особых затрудне- 
ний осваивали С-+- и другие объектные языки. Они попросту не были обремене- 
ны стереотипами. В конце концов ия с этим разобрался. Во-первых, в отношении 
ООП я задавал неправильный вопрос «а зачем это надо?», который только сбивал 
с толку. Дело в том, что я уже давно мыслил в терминах ООП и даже создавал 
объекты, но посредством функциональныхязыков. Поэтому, естественно, я не мог 
получить хороший ответ на свой вопрос «зачем?». Для меня тогда единственным 
оправданием ООП-языков оставалось лишь наличие компиляторов для них, осу- 
ществляющих проверку синтаксической правильности, и средства отладки про- 
грамм. Во-вторых, аналогия объектов с бытовыми приборами вызывала у меня 
неверные ассоциации, скорее удаляя от понимания, чем приближая к сути. Воз- 
можно, это связано с индивидуальными особенностями моего восприятия. Тем 
не менее лучшей, на мой взгляд, интерпретацией объекта является контейнер, 
содержащий переменные и функции. Представьте себе, что я написал некую про- 
грамму, предназначенную для решения некоторых задач. Свое творение я назвал 
объектом и сделал его доступным для пользователя или программиста. Это озна- 
чает, что я опубликовал описание этого объекта, в котором указал, какие внутрен- 
ние переменные и функции могут быть использованы и каким образом, чтобы 
объект работал по своему назначению. Иначе говоря, я просто вывел наружу дат- 
чики и органы управле ня своим объектом, а все остальное скрыл от г лаз пользо- 
вателя. Со временем я могу усовершенствовать программный код своего объекта, 
не сообщая об этом пользователю, и, что еще важнее, при соблюдении определен- 
ных условий я могу не тестировать свой модифицированный объект в комплексе 
с другими. 


В связи с появлением многозадачных операционных систем, таких как \Мш4о\$, 
05/2, Чшх и Шпах, открылись возможности для так называемого событийного 
программирования. Программные единицы (объекты, в частности) могут реаги- 
ровать на действия пользователя (например, щелчок кнопкой мыши, нажатие на 
клавишу и др.), а также передавать сообщения о событиях другим программным 
единицам. При этом внешне ситуация выглядит так, будто одновременно функ- 
ционирует множество объектов, в какой-то степени автономных, но действующих 
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согласованно, взаимообусло влвенно. С одной стороны, это открывает огромные воз- 
можности довольно легко создавать интересные и сложные программы. С другой 
стороны, при необдуманных решениях могут возникнуть непредвиденные и пло- 
хо контролируемые ситуации. 


Язык ЛауабсирЕ создан, главным образом, для разработки интерактивных при- 
ложений, то есть программ, реагирующих на действия пользователя. Действия 
пользователя инициируют события, которые и обрабатываются в сценариях, на- 
писанных на Лауазспире. Вместе с тем на этом языке можно писать и другие про- 
граммы, например создавать игры, информационно-справочные системы ит. п. 
Браузеры, выполняющие программы на Лауа$ стр, предоставляют программисту 
огромное множество уже готовых объектов. Таким образом, вы освобождаетесь 
от рутинной части работы по созданию графической среды и элементов управле- 
ния, вам остается только использовать их в соответствии с вашими задачами. 
В большинстве случаев программы на ./Лауа$ сир" оказываются достаточно корот- 
кими, поэтому их может разработать и отладить даже новичок. Отметим еще одно 
важное обстоятельство: ЛауаЗсире используется, как правило, совместно с дру- 
гим языком — НТМГ. С одной стороны, это требует от программиста знания двух 
языков, а с другой — существенно упрощает задачу организации ввода и вывода 
информации. Наконец, именно благодаря НТМГ, который всего за несколько лет 
освоили миллионы, Гауазспр: стал чрезвычайно популярным языком среди обыч- 
ных пользователей компьютеров, а не только программистов-профессионалов. 


Те, кто знаком с языком С, легко освоят Лауазспрь, поскольку многие языковые 
конструкции им уже известны. Они должны лишь привыкнуть к свободе обраще- 
ния с типами данных, которую предоставляет ГауаЗст!ре, а также освоить концеп- 
цию объектной модели документа. 


Несмотря на похожие названия, между ЛГауазст!р: и Лауа очень мало общего. Лауа 
похож на С++, но, в отличие от него, является не зависимым от платформы среды 
выполнения. 


2.2. От простого до динамического НТМЕ 
2.2.1. Простой НТМЕ 


Для создания веб-страниц разработан довольно простой язык НТМГ  (Нурег Теж 
МагКкир Гапгиазе — язык разметки гипертекста). Изначально он задумывался как 
язык разметки документа, содержащего текстовую и графическую информацию 
вместе с элементами управления, такими как ссылки на другие документы. Тек- 
сты, содержащие элементы, которые являются ссылками на другие документы, назы- 
ваются гипертекстами, а сами ссылки называют еще гиперссылками. Кроме тексто- 
вой и графической информации, а также ссылок в документ можно включать аудио- 
и видеофрагменты. Чтобы создать такой документ, достаточно в обычном текстовом 
редакторе (например, в Блокноте УМп4до\з) написать программу на языке НТМЕ, 
Такие программы сохраняются в файлах с расширением Вит или 61111, авыполняют- 
ся они в веб-браузере, например Мсгозой Пщегпе{ Ехр]огег или Месаре Мау1еабог. 

Инструкции НТМЕ называют тегами, или дескрипторами. Они выделяются уг- 
ловыми скобками (< и >). Каждый тег имеет свое название, являющееся ключе- 
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вым словом. Спецификация тега обеспечивается его параметрами, которые обыч- 
но называют атрибутами. Атрибуты могут иметь значения (аргументы). Назва- 
ния тегов и атрибуты можно писать в любом регистре. Атрибуты, если они име- 
ются, пишутся за названием тега в произвольном порядке через пробел. Формат 
тега имеет следующий вид: 

ИЕ ТИНА [АГРИБУП |= значение!| .. . |АТРИБУМ [= значением] |> 
Квадратные скобки показывают, что заключенные в них элементы не обязатель- 
ны . Существуюттеги без атрибутов (например, тег перехода на новую строку < ВВ >), 
а также атрибуты без аргументов (например, МОКЕЗУЕ в теге <ЕКАМЕ>). Даже если 
для тега предусмотрены атрибуты, во многих случаях их можно не указывать, ис- 
пользуя значение по умолчанию. Так, тег «Мб ЗВС = "расвиге.)рэ"> дает браузеру 
команду вывести на экран графический объект из файла р1с@те.ре. Здесь ключе- 
вое слово Мб — названиетега, ЗВС — атрибут, а "р1саге.]рэ" — аргумент (значе- 
ние). Атрибут [ШО присущ любому тегу, но если он не используется, то по умолча- 
нию принимается, что его значение — пустая строка. 


Теги можно писать в одной строке или в нескольких, делая переносы в любом 
месте. Невидимый служебный символ перевода строки и возврата каретки, встав- 
ляемый в редакторе при нажатии клавиши Ещег, не воспринимается браузером 
как разделитель тегов. Можно считать, что браузер воспринимает последователь- 
ность тегов как единую строку символов. 

Большинство тегов являются контейнерными. Это означает следующее. 


. Тегу<ТЕГ. .> обязательно соответствует заключительный тег</ТЕГ>. 


‚ Между этими тегами можно разместить другие теги, контейнерные или нет. 
В связи с этим можно говорить о вложенности одних тегов в другие. 


Например, теги тела документа <ВОБ\>, ссылки <А...>, раздела <ПМ>, таблицы 
<ТАВЕР> и др. являются контейнерными, то есть им соответствуют заключитель- 
ные теги </ВОБУ>, </А>, </ПЛМУ>, <ТАВГЕ>. Говоря «внутри тега <ТЕГ», мы имеем 
в виду то, что расположено между тегами <ТЕГ> и </ГЕГ>. В приведенном ниже при- 
мере показано, что внутри тега ссылки <А> можно разместить тег графического 
изображения <1МОС>, создав таким образом графическую ссылку: 


<А НВЕЕ = "\мм\м.уапдех.ги"><1Мб $ВС ="Баппег. 911" >< /А> 


НТМГ-программа (НТМТ-код), формирующая документ, начинается тегом < НТМЕ> 
и заканчивается тегом </НТМ1>.. Таким образом, <НТМГ> является контейнерным 
тегом, причем самого верхнего уровня. 


В НТМЕ-коде существуют теги, которые никак не проявляются в окне браузе- 
ра какими бы то ни было визуальными эффектами (например, <НЕАО>, <МЕТА>, 
<5СЕВТРТ>). Вместе с тем существует множество тегов, которым соответствуют 
определенные видимые элементы документа (веб-страницы). Например, тегу 
<МО> соответствует изображение, Тегу <ВИТТОМ> — кнопка, тегу< ПМРОТ> — поле 
ввода данных, переключатель или кнопка, в зависимости от значения атрибу- 
та ТУРЕ. 


Приведенный ниже НТМГ-код формирует простую веб-страницу, содержащую 
заголовок первого уровня (<Н1>), изображение (<1МСО>), ссылку (<А>) и форму 
(<НОКМ>), которая содержит поле ввода данных (<ПМРОТ>) и кнопку (<ВИТТОМ»>). 


2.2. От простого до динамического НТМЕ — 115 


«НМ 

<Н1>Моя веб-страница</Н1> 

МО $ВС="р!с{.'рд"> , 

<А ННЕР = "ммм. адптга!. ги/-Чипаем">Саи автора</а> 
<ЕКОАМ» 

<ИМРОТ ТУРЕ="ех{" МАШДЕ=""> 

<р> 

<ВиТТОМ>Нажми здесь</ВЛЯТОМ> 

</ЕОВМ> 

<ИНТМЕ> 


На рис. 2.1 приведен этот НТМГ-документ в окне браузера, а также показано со- 
ответствие его элементов тегам НТМТГ-кода. 


аС’\Мттон! | М<!Нт\ п] ИН 1 Абевазой ПАбосоае © храни 


заза м-ч Соылки * 


Моя У№еБ-страница 
* ^ | 


$ м «ТМ = 
«27 — ——<Н1>Моя веб-страница</Н1> 
< МО 5НС=' ре] рд'> 
г рам — | <АНВЕЕ = \\мьм. адпига!, уеагевхоцевужАЯ эйт затора=/А> 
| ны фа <ЕОВМ> 
а Сайт автора р * — -<ИМРИТТУРЕ =“ех!' УАЕИЕ= 
1 1 
] т  «ВАЛТОЫ>Нажми здесь</ВитТОы> 
Нажми зресь 44 ны — 2 </ЕОВМ> 
В етекальааак </НТМЕ> 
2 | Оркитие тр 2 Ной комбьют | 


] И 


Рис. 2.1. Тегам НТМЕ соответствуют элементы НТМ!-документа в окне браузера 


С помощью специальных тегов можно форматировать текстовые данные: управ- 
лять шрифтом, задавать абзацы и способ выравнивания, в том числе взаимное 
расположение текста и изображений. 


Если не использовать специальных средств позиционирования, то элементы в до- 
кументе будут располагаться в порядке их появления в НТМГ-коде соответствую- 
щих им тегов. При этом если не использовать теги перевода строки (<ВВ>) или абзаца 
(<Р>), то элементы будут располагаться рядом друг с другом по горизонтали или по 
вертикали, в зависимости от размеров окна браузера и их собственных размеров. Теги 
<ВК> и <Р> являются довольно слабыми средствами форматирования. 


Один из часто применяемых способов разметки документа основан на использова- 
нии группы тегов, определяющих таблицу (<ТАВЕЕ>, <ТВ>, <П> и др.). Таблицы можно 
создавать не обязательно с видимыми границами (рамками). С помощью таблицы 
можно просто разбить все поле документа на прямоугольные ячейки одинаковых или 
различныхразмеров и размещать в них нужные элементы (тексты, изображения, кноп- 
ки, ссылки ит. п.). Во многих случаях этого способа разметки вполне достаточно. 


116 Глава 2. Основы создания сценариев 


2.2.2. Динамический НТМЕ 


Выше мы бегло рассмотрели то, что называют простым, или классическим, НТМГ. 
Вскоре после его появления выяснилось, что он не вполне отвечает потребностям 
разработчиков и пользователей веб-сайтов. Во-первых, нужны были более мощ- 
ные и гибкие средства форматирования. Во-вторых, требовалась возможность 
вставки в НТМГ-документ объектов сторонних производителей. В-третьих, тре- 
бовались средства для управления содержимым НТМГ-документа, загруженного 
в браузер, а также для обработки действий пользователя (манипуляции мышью, на- 
жатия на клавиши). Иначе говоря, было необходимо, чтобы НТМГ-документ являл- 
ся динамическим и интерактивным (мог взаимодействовать с пользователем). 


В ответ на потребность в мощных средствах форматирования появились так на- 
зываемые С$5 (СазсаЧшт» Зе ЗВее $ — каскадные таблицы стилей). Теперь па- 
раметры тегов стало возможным задавать не только с помощью атрибутов, но и 
в строке, являющейся значением специального атрибута ЗЕ. С помощью этого 
атрибута можно определить индивидуальные параметры форматирования и по- 
зиционирования практически для всех тегов. Кроме атрибута 3ММЕ был введен 
в обращение контейнерный тег <ЗГИЕ>. В теге <ЗТМЕ> можно задать индивиду- 
альные стили для ряда тегов, а также создать произвольные стили и закрепить за 
ними имена. Затем для придания какому-нибудь тегу свойств поименованного 
стиля можно обратиться к нему с помощью атрибута (ТАЗ = имя_стиля. С помощью 
стилей можно определить параметры форматирования текстов, задать фильтры 
(визуальные эффекты) для текстовых и графических элементов, а также задать 
три координаты позиционирования элементов. Позиционирование, намойвзгляд, — 
главная функциональная возможность С$5. Координаты {ор и 1е&Ё, задаваемые 
с помощью стиля, определяют положение элемента на плоскости документа, а ко- 
ордината7-ш4ехуказывает еще и слой документа. Так, задавая значения {ор и 1ей 
для различных элементов, можно добиться того, что одни элементы будут накры- 
вать другие. Чтобы указать, какой из них должен быть выше или ниже другого 
(независимо от порядка следования в НТМГ-коде), служит параметр 2-шдех. 


Объекты сторонних производителей, созданных с помощью различных языков про- 
граммирования, вставляются в НТМГ-документ посредством контейнерных тегов 
<ОВУЕСТ> и <ЕМВЕГ». С их помощью можно встроить в НТМГ-документ звук, видео, 
НазЮ-анимацию, векторную графику, таблицы базы данных и многое другое. 


Для управления элементами НТМГ-документов и даже самим браузером, гене- 
рации новых документов, организации диалогового взаимодействия с пользова- 
телем, выполнения каких-то расчетов и обработки данных в НТМЕ была преду- 
смотрена интеграция со специальными языками программирования. Программы, 
написанные на этих языках, называют сценариями ($с11р{$). Стандартным язы- 
ком сценариев является Лауа5ст!рт. Его должны уметь интерпретировать все веб- 
браузеры. Браузер М1сгозой Пиегпае Ехр]огег помимо Лауа$ сре воспринимает 
еще один язык — У15па1Вазе$ спрь, чего нельзя сказать о Меё5саре Мау1еатог. 


Каким образом ЛТауаЗсирЕ взаимодействует с НТМГ-документом и браузером? 
Дело в том, что браузер и загруженный в него НТМТГ-документ представлены 
внутри браузера посредством иерархического множества объектов — так называ- 
емой объектной модели. Для сценария на ЛауаЗсп!рЕ объекты браузера и НТМТ- 
документа образуют доступную среду. Что такое объекты и как с ними обращать- 
ся, мы уже узнали из главы [Г Чтобы использовать объекты браузера и документа, 
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загруженного в него, необходимо знать их названия, свойства и методы. Но об 
этом немного позже. 
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2.3.1. Расположение сценариев 


Программы, работающие с объектами НТМТ-документа, называют сценариями. 
Вы можете написать программу на языке Лауа5ст!ре. Она может иметь самостоя- 
тельную ценность, используя собственные ресурсы Лауа5ст!рё, но, кроме Того, она 
способна взаимодействовать с объектами среды, окружающей интерпретатор язы- 
ка. Интерпретатор ЛауаЗсире, встроенный в веб-браузер, предоставляет пользо- 
вателю возможность использовать средства языка для д<» 1а к ресурсам браузе- 
ра и всего того, что в нем находится в данный момент. А именно к свойствам 
браузера и документа, загруженного в него. Конечно, вам не терпится узнать, как 
добраться до этих ресурсов, чтобы воздействовать на них. Это делается с помошью 
сценариев, написанных на языке ]Лауазспре в некоем месте. А где именно? Есть 
несколько вариантов размещения программ на Лауа5спр®, выполняющих роль 
сценариев для НТМГ-документов. Ниже мы их и рассмотрим. 


Сценарии можно писать непосредственно в НТМГ-документе, а также в отдель- 
ных текстовых файлах, которые вызываются из НТМГ-документа. Проще всего 
размещать сценарий непосредственно в НТМГ-документе, чаще всего так и по- 
ступают. Сразу заметим, что размещение сисенария в отдельном файле совсем не 
сложно, но не всегда оправданно из экономических соображений. Необходимо 
накопить достаточное количество программных заготовок, чтобы решиться ис- 
пользовать их в последующих проектах в качестве библиотек. Новички могут пока 
об этом не задумываться, достаточно помнить, что рано или поздно такая задача 
возникнет. Итак, сейчас мы займемся размещением сценария в НТМГ-докумен- 
те, чтобы иметь возможность использовать их для оперативной модификации 
НТМГ-документа, а следовательно и веб-страницы. 


Сценарий в НТМГ-документе можно разместить несколькими способами. Сво- 
бода подкупает, требуя взамен принять хоть какое-нибудь решение. Трудности 
наступают именно при принятии волевого решения. Мы начинаем раздумывать 
о правильности сделанного выбора. Именно тогда и возникают мечты о приемле- 
мом рецепте. Рецепты можно выдавать только при четко поставленном диагнозе 
и фиксированном анамнезе. В программировании это трудно сделать. Програм- 
мирование — это искусство, хотя оно и близко к науке. Первый принцип искусст- 
ва программирования — знаменитая «бритва Оккама»: не умножай сущностей. 
Иначе говоря — не усложняй. Все, заканчиваем лирику и приступаем к делу. 


Стандартным является размещение сценария в контейнерном теге <ЗСКРТ>, то 
есть между тегами <ЭСЕРТ> и </5СВРТ>. Встречая тег <ЗСЕРТ>, браузер «понима- 
ет», что за ним начинается код сценария. Заключительный тег </ЗСКТРТ> указыва- 
ет браузеру, что код сценария закончился. Все, что находится вне этих тегов, браузер 
воспринимаеткакНТМТ-код.Контейнер<$СВТРТ>можетрасполагатьсявлюбомместе 
НТМЕ-документа и даже не один раз. От его расположения иногда может зависеть 
функционирование всего НТМГ-документа, но об этом мы скажем ниже. 
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Контейнерный тег <5СКТРТ>, объемлющий код сценария, может содержать следу- 
ющие атрибуты. 


. ГАХОЦАОСЕ — язык сценария; возможные значения: 
а "]Лауабсир!", "]Зсирг"; 
. "УВЗсирЕ", " "МВб". 
Если атрибут ГТАХОЦАСЕ не указан, то в Пщегпе{ Ехр]огег подразумевается ] Зсирё. 


. ЭКС — указывает файл (имя или ОВГ-адрес), содержащий код сценария. Этот 
атрибут используется в том случае, если сценарий расположен не в НТМГ- 
документе, а в отдельном файле. 


Примеры 

<ЭСВРТ ГАМСУАСЕ="Зама$спрЕ"> 

// код сценария 

</ЗСНРТ> 

<$СЕЙРТ ТАМСУАСЕ = "1$ сгГр+"” $ВС = "тузсг!р{$ . ] $"></$СВИРТ> 
Современные браузеры распознают еще и версию языка. Например, Пиегпе{ Ехр]о- 
гег 4.0 и Месзсаре Мамеаог 4.0 знают версию языка Лауа$сири 12.. Во время напи- 
сания этой книги была доступна версия Гауа5сириИ.5, о которой знают Пиегпе 
Ехр!огег 6.0 и Месаре Мамватог 6.0. Если версия языка Лауа$сг!ре в значении 
атрибута ГТАМОЦАСЕ указана, а браузер не знает ее, то сценарий будет им просто 
проигнорирован. Если же версия языка не указана, то браузер, которому она не 
знакома, может неправильно выполнять некоторые выражения сценария или даже 
выдавать сообщения об ошибках. 


Редакция языка ]Лауазсире для Пиегпе{ Ехр]огег называется ]Зст!ре. Вместе с тем 
в Пиегпе Ехргег можно использовать и ГАМОЦАСЕ = "]ауабсир(". В браузере Ме{- 
зсаре Маужаюг значимым является только ГАХОЦАСЕ = "]ауа5сир"", ссылка ПАМОДАСЕ = 
"]5сире" будет им проигнорирована. Поэтому при разработке сценариев, рассчи- 
танных для различных браузеров, рекомендуется использовать ссылку [ГАХОЦАОСЕ = 
"Гауабсг!рЕ". В примерах, приводимых в настоящей книге, мы не будем указывать 
язык, на котором написан сценарий (из соображений экономии места). 


Старые браузеры, появившиеся раньше ]Лауа$стр®, игнорируют теги <ЗСВТРТ» 
и </ЗСЕТРТ», а все, что находится между ними, интерпретируют как содержимое 
НТМЕ-документа. Результат может быть самым неожиданным. Чтобы уменьшить 
вероятность отображения кода сценария в окне старого браузера, следует заклю- 
чить его в дескрипторы комментария <!— и -->. Новые браузеры, поддерживаю- 
щие сценарии, будут игнорировать эти символы, выполняя код сценария, а старые 
(не понимающие сценарии), наоборот, будут игнорировать код сценария. Вот как ис- 
пользуются символы комментария предохранения сценария от старых браузеров: 


<ЭСНРТ АМСУЧАСЕ="Чауа$ сир!" > 
«__ 
// код сценария 


</5СВТРТ> 


Обратите внимание на заключительные символы тега комментария, перед кото- 
рыми стоят две косые черты. Без них ЛауаЗсире будет пытаться интерпретиро- 
вать символы --> как заключительные символы комментария НТМГ, а с ними он 

то их проигнорирует. В примерах, приводимых в настоящей книге, мы не бу- 
дем указывать символы комментария для адаптации к старым браузерам из сообра- 
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жений экономии времени и места. Однако помните, что современная культура оформ- 
ления сценариев обязывает нас делать это в своих практических приложениях. 
Если сценарий располагается в отдельном файле, то в нем, разумеется, теги <ЗСВТРТ> 
и </ЗСВРТ> не пишутся. Как уже отмечалось, файлы со сценариями на Лауа5сг!ре 
являются обычными текстовыми файлами. В принципе, они могут иметь любое 
расширение имени, но, как правило, используется расширение }5. В отдельных 
файлах обычно размещают библиотеки функций (определения функций), а так- 
же сценарии, использующиеся в нескольких НТМГ-документах одного или не- 
скольких сайтов. Сценарий, загруженный из внешнего файла, можно представить 
себе просто как его вставку в НТМГ-документ. Вот пример: 
<НТМ> 


<ЗСВТРТ> 
типсНоп тупс() { 


1 

</ЗСВРТ> 

<$СНРТ $НС = "[{!уПЬгагу!. ]5"></$СЕРТ> 
<$СНРТ $АС = “тургодгат. ]5"></5СЕИРТ> 


</НТМЕ> 


Здесь в НТМГ-документе расположены три раздела (секции) сценария, два из 
которых загружаются из отдельных файлов. В первом разделе сценария дано опре- 
деление некоторой функции. 


Сценарий можно также писать как строку операторов, разделенных точкой с запя- 
той, взятую в кавычки. В такой форме сценарии обычно используются в качестве 
обработчиков событий. Об этом более подробно будет рассказано в подразделе 2.3.2. 


Вызовы функций и их определения могут располагаться в произвольном поряд- 
ке, только если они расположены в одном и том же контейнере <ЗСЕРТ>. Если вы 
располагаете их в разных контейнерах <$СЕРТ», то необходимо, чтобы определе- 
ние функции располагалось выше ее вызова. Аналогично, если определения функ- 
ций находятся в отдельном файле, то его необходимо загрузить в НТМГ-доку- 
мент раньше вызовов этих функций. Ниже приведены примеры правильного 
и неправильного расположения сценариев в НТМГ-документе: 


Правильно Неправильно 
<НТМЬ <НТМЬ 
<5СНРТ> 
ТипсНоп туипс(){ 
:.. туипсоО 
</УСВРТ> </ЗСВТРТ> 
<5СВРТ> <СВРТ> 
ыы РапсНоп шуйте({ 
тувисО ре 

} 
</5СВТРТ> </ЗСВТРТ> 


</ НТМ> | . </НТМЫ> 
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При попытке загрузить и выполнить неправильный вариант НТМГ-кода появит- 
сядиалоговое окно с сообщением об ошибке «Ошибка: Предполагается наличие объ- 
екта». Браузер интерпретирует НТМГ-теги последовательно. Так, встретив выра- 
жение вызова функции туГип‹сОв одном контейнере <5СВТРТ>, браузер еще не имеет 
в памяти определения этого объекта (функции), расположенного в другом кон- 
тейнере <ЗСЁРТ>. Если же определение функции и ее вызов находятся в одном 
и том же контейнере <$СКРГ>- то его содержимое сначала загружается в память, 
а затем анализируется. Если интерпретатор встречает вызов функции, то он ищет 
ее определение в памяти и при удачном результате выполняет код этой функции. 


Следующие два варианта являются правильными, потому что определение функ- 
ции и ее вызов находятся в одной секции сценария (в одном контейнере <ЗСЕВТРТ>): 


Правильно Правильно 
«Нмь> 

<ЭСНРТ> <5СВРТ> 

ТипсНоп туРипс(){ туРипсО 


} КипсНоп туп 
} 
</5СВТРТ> </ЗСЕРТ> 


</НТМ>. </НТМЕ> 


Если необходимо, чтобы сценарий загрузился в браузер прежде, чем загрузятся 
элементы НТМГ-документа, то его следует расположить в верхней части НТМТ- 
кода. В этом случае сценарий обычно располагают в контейнере <НЕАО> (в заго- 
ловке документа). Это самое лучшее место для расположения функций. 


Если требуется, чтобы сценарий загрузился после загрузки всех элементов НТМГ- 
документа, то возможны следующие два варианта. Во-первых, можно расположить 
сценарий в конце НТМГ-документа. Во-вторых, можно использовать атрибут-собы- 
тие ошоа4 в контейнерном теге <ВОБУ>, который задает основную часть НТМГ-доку- 
мента. В последнем случае значением атрибута оп1оа4 обычно является строка, со- 
держащая имя функции. Определение этой функции, как правило, содержится в 
контейнере <ЭСВТРТ>, размещенном в контейнере заголовка НТМГ-документа <НЕАО»>. 
Обратите внимание, что при использовании атрибута-события ошоа4 в теге <ВОБУ> 
обработчик этого события выполняется по завершении загрузки всех элементов, опре- 
деленных в контейнере <ВОБУ\>, а не в процессе их загрузки. Вот пример: 

<НТМО> 

<НЕАО> 


<ЭСВТРТ> 
Елрсетов муЕопс () { 


ОСАТРТ> 
НЕАО> 


—^— 


<ВОБУ оп1оаа = "муЕапс0О"> 
теги 
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</ВООУ> 


</НТМЬ> 


2.3.2. Обработка событий 


Одним из главных (но далеко не единственным) назначений сценариев в НТМТ- 
документе является обработка событий, таких как щелчок кнопкой мыши на эле- 
менте документа, помещение указателя мыши на элемент, перемещение указателя 
с элемента, нажатие клавиши и т. п. Большинство тегов НТМЕ имеют специаль- 
ные атрибуты, определяющие события, на которые могут отреагировать соответству- 
ющие элементы. Список всех допустимых событий довольно обширен и рассчитан 
практически на все случаи жизни. События называются довольно просто, особенно 
если вы знаете английский язык. Например, щелчок левой кнопкой мыши — опсйск; 
изменение в поле вводаданных — опспапее; событие оптоизеоуегпроисходит, когда 
указатель мыши помещается на элемент НТМГ-документа. Список событий мы рас- 
смотрим позже. Значением таких атрибутов-событий в тегах НТМЕ является стро- 
ка, содержащая сценарий, выполняющий роль обработчика события. Например, сле- 
дующий НТМГ-код определяет заголовок второго уровня, который реагирует на 
щелчок кнопкой мыши тем, что выполняет некоторую функцию ту®псО: 


<Н2 опсИсКк = “ту ипс() ">Щелкни здесь</Н2> 


Для одного и того же элемента можно определить несколько событий, на которые 
он будет реагировать. Другими словами, для одного и того же тега можно указать 
несколько атрибутов-событий. Имена этих атрибутов, как и других, можно пи- 
сать в любом регистре. Порядок следования атрибутов не имеет значения. 


Итак, значением атрибута-события, как уже отмечалось, является код сценария, 
заключенный в кавычки. Этот сценарий называют также обработчиком события. 
В приведенном выше примере обработчиком события опсИсК является функция 
шуРпсО. Если обработчик события содержит несколько выражений, то они раз- 
деляются точкой с запятой. 


<НТМЕ> 
<СВНРТ> 


псНоп имя функции(){ 
А 


ВапсНоп значение 1с). событие( 
А 
</ЗСВТРТ> 
<ТЕГ Ш-"значен 
<ТЕГ событие="“имя_функции( 


<ТЕГ событие="код_сценария"> 
</НТМЬ> 


Рис. 2.2. Различные варианты оформления обработчиков событий 


122 Глава 2. Основы создания сценариев 


Пример 

<Н2 опс|ск = "уай х = 5; х = х + ис О ">Шелкни здесь</Н2> 
Обычно обработчики событий оформляются в виде функций, определения кото- 
рых помещают в контейнерный тег <ЭСВТРТ>. 


В качестве примера ниже приведены два варианта оформления обработчика щелч- 
ка на изображении (рис. 2.2). 


1. Изображение в НТМГ-документе определяется, как известно, тегом <МСО>. 
Файл с изображением задается атрибутом ЗКС. Обработчик события опсИсК за- 
дается в примере как функция сНсКипагеО, которая должна быть определена 
где-то в контейнере <ЗСЕТРТ»>. В результате щелчка на графическом изображе- 
нии из файла р!сите.]рх выводится окно с сообщением: 

«НТ 
<УЭСНРТ> 


ТипсНоп сИск!тадео { 
а!ег{("Привет!") 


’ </ЭСНРТ> 
<мМ@ $АС = "р!с+{.]рд" опсИсКк = “"сИсктадебо"> 
</НТМЕ> 
Вариант 2: 
<НТМЬ> 
<Ме@ $5АС = “р!с{.]рд" опсИск = "аег{спрпеет!" 
</НТМЕ> 
Если сценарий обработки события небольшой и используется в НТМГ-доку- 
менте один раз, то целесообразно оформлять его непосредственно в виде значе- 
ния атрибута-события. В других случаях предпочтителен первый вариант, то 


есть оформление обработчика в виде функции. 


Чтобы указать браузеру явным образом, что сценарий написан на языке Лауа- 
$сирё, можно в значении атрибута-события написать префикс "ауазсирЕ". На- 
пример, <МС опсИсК = ")ауазспре: а1еИ:(' Привет!")">. Если не указывать язык сце- 
нария, то браузер будет подразумевать ГауаЗсире. 


2. Теперь рассмотрим еще один способ оформления обработчиков событий. Преж- 
де всего, отметим, что почти для всех тегов НТМЕ, можно помимо прочих ука- 
зать еще один атрибут — 1) (идентификатор). Этот атрибут принимает любые 
строковые значения, которые играют роль индивидуальных имен элементов 
в их объектном представлении. Если атрибут Ш в теге используется, то для 
задания обработчика события можно не использовать атрибуты-события. Вме- 
сто ; (1 в контейнере <ЗСВТРТ> достаточно написать определение функции 
обработчика события, имя которой образуется по следующему шаблону: 

значение 10. событие () 
Пример 
<НТМЕ> 
<Н1 10 = "Мупеас1ег">Привет всем!</Н1> 
<УСЫРТ> 
ЕопсЕ1оп Мувеайег.опс11сКк() 
а1егё ("Привет!") 
т 


<5СВРТ> 
</НтмЕ> 
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СОВЕТ — — а : 


Браузер, встречая в НТМ!-документе тег с определенным 0, создает в объектной модели 
этого документа объект с таким же именем. Для этого объекта имеется метод обработки 
события. Название метода совпадает с названием события, но синтаксис использования 
метода требует, чтобы его название было написано в нижнем регистре. В связи с этим 
я советую вам в любом случае писать название события в нижнем регистре. 


Обратите внимание на следующие два обстоятельства, важные только для рас- 
смотренного выше способа оформления обработчиков событий: 


. Элемент НТМГ-документа должен быть загружен раньше, чем функция-об- 
работчик события. 


.  Составное имя функции-обработчика события содержит название события 
в нижнем регистре. 


Если требуется, чтобы сценарий обработал событие независимо от того, с каким 
элементом оно связано, то можно воспользоваться таким составным именем функ- 
ции-обработчика: 


ТипсНоп доситеп+.событие(){ 


Пример 
ТипсНоп доситейт.опсИсСК() { 


} 
Приведенных выше способов обработки событий (привязки обработчиков к эле- 
ментам) вполне достаточно для практических нужд разработки веб-сайтов и дру- 
гих приложений. Однако следует упомянуть еще об одном способе, который при- 


меним для [Е версии 4.0 и старше. Он основан на использовании атрибутов ЕОК 
и КЕТГ в теге <ЭСВРТ>. 


Атрибуту ЕОВ присваивается ссылка на объект, который должен реагировать на 
событие, а атрибуту ЕУЕМГ присваивается название события. В качестве ссылки 
на объект обычно используется значение идентификатора объекта, то есть значе- 
ние атрибута ГО. 


Пример 

<НТМЕ> 

<$СЕРТ РОВ = "МУВУТТОМ" ЕМЕМТ = “опсИск"> 

а!ег{С'Вьт щелчок”) 

</ЗСНРТ> 

<ВОТТОМ 10 = "МУВУТТОМ">Нах<ММ ЗЯесь</вУттом> 

</НтмЕ> 
Выражения в контейнере <ЗСКРТ> будут выполняться только при наступлении 
события, указанного в Е\МЕМТ, которое связано с объектом, указанным в В. В при- 
веденном выше примере при щелчке на кнопке (<ВОТТОМ . . .>) будет выведено 
диалоговое окно с сообщением. 


Рассмотренный выше способ позволяет не использовать атрибуты-события и ука- 
зания обработчиков событий в тегах элементов. Однако при этом код сценария 
оказывается привязанным только к одному элементу. Чтобы использовать этот 
же код для других элементов, придется повторить его в секциях сценария (кон- 
тейнерах< $ СВТРТ>), отдельно для каждого элемента. 
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В подразделе 2.4.3 мы изучим еще один способ назначения объектам обработчи- 
ков событий — с помощью сценариев. 


2.3.3. Объекты, управляемые сценариями 


Мы рассмотрели, где располагаются сценарии и каким образом они могут быть 
привязаны к событиям. Если событие происходит, то выполняется соответствую- 
щий ему сценарий-обработчик. Кроме того, сценарий можно запустить и вне вся- 
кой связи с каким бы то ни было событием. В любом случае сценарий должен что- 
то с чем-то делать. Предметом деятельности сценария являются объекты окна 
браузера иЕ ‚та, загруженного в него. Параметры элементов доку- 
мента, заданные с помощью атрибутов соответствующих тегов, можно изменить. Бо- 
лее >, можно заменить одни теги другими и даже заменить весь загруженный 
НТМГ-документ на другой. Делается это сценариями, но не напрямую с тегами и 

иями атрибутов (то есть с НТМГ-кодами), а с представляющими их объектами. 


НТМЕ-документ отображается в окне браузера. Окну браузера соответствует 
объект мш4о\, а НТМГ-документу, загруженному в окно, соответствует объект 
4оситеп". Эти объекты содержат в своем составе другие объекты. В частности, 
объект 4оситеп{ входит в состав объекта \1п4о\. Элементам НТМТ-документа 
соответствуют объекты, которые входят в состав объекта доситепЕ. Все множе- 
ство объектов имеет иерархическую структуру, называемую объектной моделью. 
Более подробно мы рассмотрим ее в следующей главе, а сейчас остановимся на 
общих вопросах, связанных с объектами. 


В главе | мы уже встречались со встроенными объектами ЛауаЗсирЕ и объектами, 
создаваемыми пользователем. Напомним, что объект представляет собой своего 
рода контейнер для хранения информации. Он характеризуется свойствами, ме- 
тодами, а также событиями, на которые может реагировать. Доступ к свойствам 
и методам объекта осуществляется с помощью выражений вида: 

объект.свойство 

объект.метод() 
Объекты могут находиться в отношении вложенности (подчиненности). Объект, со- 
держащий в себе другой объект, называют родительским. Объект, который содер- 
жится в каком-нибудь объекте, называют дочерним по отношению к нему. Таким 
образом, устанавливается иерархия. Чтобы указать конкретный объект, требуется 
перечислить все содержащие его объекты начиная с объекта самого верхниего ие 
хического уровня, подобно тому как указывается полный путь к файлу на диске: 


объект! .объект2. . . . объектМ 


Если объект входит в состав другого объекта (является подобъектом другого), то 
для доступа к его свойствам и методам используют следующий синтаксис: 


объект! .объект2. . . . объектМ. свойство 
объект! .объект2. . . . объектМ.методо 


Нередко прло бъект некоторого объекта называют его свойством (так сказать, слож- 
ным свойством). В этом случае можно говорить, что свойства объектов бывают 
трех типов: 


. Просто свойства (простые свойства); 
. методы (свойства-функции); 
. объекты (сложные свойства, имеющие свои свойства). 
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Поскольку объект аоситепЕ является подобъектом объекта \Уш@4о\, ссылка на 
НТМГ-документ, загруженный в текущее (активное) окно браузера, будет выгля- 
деть следующим образом: \уш4о\. 4оситеп:. Объектдоситетимеетметод\уще(сгроКа), 
позволяющий записать в текущий НТМГ-документ строку, содержащую просто 
текст или теги НТМГ. Чтобы применить этот метод, следует записать: \/шдом, 
оситеп.мще(с1роКа). 


«нтм> мипаом 


<Н1>Моя ЫеБ-страница</Н1> 


<ИНТМЕ> 
Фоситепи 


«НТМ1_> Ипа” | г 
<НЬМоя 1л1еБ-страница</Н1> 

Мо 5ВС = "р1с1.]рз"> 
«НМ ь 


Я | Подобъектьм 
«НтмЕ> О | мимо 
<Н>Моя ' ИеБ-страница</Н1> 
«Мб 58С = "ре т } 
О Поситепе;. 


</ЕОВМ> 


тадез Югт$ 


<Нтмь> улпдо\ ро НЫ | 
«НМоя ЫеБ-страница</Н1> р 

«Мб 58С = "ре ь } 

«ЮВ | Чоситет 

<ИМРОТ ТУРЕ = Чех” УАЩЕ = " а ] 

«ВОТТОМ> Нажми здесь <ВИТТО№ 


</ОВМ> ипадез | КЮ 
<ИНТМЕ> 


еж рибоп | 


Рис. 2.3. Структуры множеств объектов для различных НТМ!-документов 
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Итак, как уже отмечалось выше, при загрузке НТМТ-документа в браузер созда- 
ется объектная модель этого документа. Рассмотрим в общих чертах, на простых 
примерах, что именно происходит. Прежде всего, создается объект окна \п4оуу. 
Это корневой объект, имеющий свои подобъекты, такие как |осаНоп для хранения 
информации об ОВГ-алдресезагруженного документа и 5сгееп для хранения данных 
о возможностях экрана монитора пользователя. Затем создается объект аоситепе, 
являющийся подобъектом улпо\. Далее создаются объекты, представляющие 
некоторые отдельные элементы НТМГ-документа, такие как объекты изображе- 
ний, форм и их элементов (поля ввода, переключатели, кнопки) и др. На рис. 2.3 
показано, как усложняется структура объектного представления документа с до- 
бавлением новых тегов. Это, конечно, упрощенные схемы, дающие лишь самые 
общие представления об объектной модели. Сведения об объектной модели игра- 
ют роль своего рода путеводителя в обширном множестве объектов документа и 
окна браузера. Разработчики приложений на основе сценариев и НТМЕ всегда 
имеют под рукой такой путеводитель. 


В объектной модели документа объекты сгруппированы в так называемые кол- 
лекции. Коллекцию можно рассматривать как промежуточный объект, который 
содержит объекты собственно документа. С другой точки зрения, коллекция яв- 
ляется массивом объектов, отсортированных в порядке упоминания соответству- 
ющих им элементов в НТМГ-документе. Индексация объектов в коллекции на- 
чинается с нуля. Синтаксис обращения к элементам коллекции такой же, как 
к элементам массива. Коллекция даже имеет свойство 1|еп=И — количество всех 
ее элементов. Так, например, коллекция всех объектов графических изображений 
вдокументеназываетсяйпта»ез, коллекциявсехформ — Югил$, коллекция всех ссы- 
лок — НиК$. Это примеры так называемых частных или тематических коллекций. 
Кроме них имеется коллекция всех объектов документа, которая называется а1. 
Один и тот же объект может входить в частную коллекцию (например, Итазез), но 
обязательно входит в коллекцию а1. При этом индексы этого объекта в частной 
коллекции и коллекции а[]| могут быть различными. 


Рассмотрим способы обращения к свойствам объектов документа. Общее прави- 
ло заключается в том, что в ссылке должно быть упомянуто название коллекции. 
Исключением из этого правила является объект формы. Далее, если речь идет 
о документе, загруженном в текущее окно, то объект \/ш4о\ можно не упоминать, 
а сразу начинать с ключевого слова 4оситепе. Возможны несколько способов об- 
ращения к объектам документа: 

. с1оситеп^коллекциял'с1_объекта; 

. СЬситеп1.коллекция["Тс1_объекта"]; 

.  с!оситеп1.коллекция[индекс_объекта]. 

Здесь 14_о бъекта — значение атрибута Ш в теге, который определяет соответствую- 
щий элементв НТМТ--документе. Величинаиндекс объекта — целое число, указыва- 
ющее порядковый номер объекта в коллекции. Первый объект в коллекции имеет 
индекс 0. Если при создании НТМТ- документа вы не использовали атрибут Ш для 
некоторых элементов, то для обращения к их объектам остается только взять индексы. 
Заметим, что некоторые старые теги (например, <ЕОКМ>, <ПМ РОТ>) имеютатрибут МАМЕ 
Значение этого атрибута можно использовать при обращении к объекту наравне со 
значением атрибута Ш. К объекту формы, кроме описанных выше способов, мож- 
но обращаться по значению атрибута МАМЕ (имя формы), если он указан в теге 
<РОКМ>, но не по значению атрибута Ш: 
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Чоситепе.имя_формы 


Как известно, тег формы <ЕОЕМ?> является контейнерным и может содержать в себе 
теги других элементов, такие как<ПМРОТ>, <ВОТТОМ>И др. Обращение к элементам 
формы возможно через коллекцию а. Однако имеется и специфический для них 
способ: 

аоситеп{.имя_формы.еетеп{$[индекс_элемента] 

аоситеп+{.имя_формы.е!етеп{$[1а_ЗпембнтТа] 

аоситейт.имя_формы. тй_элемента 
Здесь индекс_элемента — порядковый номер элемента формы, а не порядковый номер 
в коллекции всех элементов; первый элемент имеет индекс 0. Заметим, что для Пиегпе 
ЕхрЮгег вместо квадратных скобок допустимо использование и круглых скобок. 
Приведенный ниже НТМГ-код формирует простую веб-страницу, содержащую 
заголовок первого уровня, изображение, ссылку и форму с двумя элементами - 
полем ввода данных и кнопкой. 


<НТМЕ> 
<Н1>Моя веб-страница</Н1> 
«Ме 99С = "р!с+.]рд"> 
<А НВЕЕ = “"\уу\.адпига!.го/-Чипаеу">Са ОТ автора</а> 
<РОАМ> 
«МРОТ ТУРЕ = "(ех{" УАВОЕ = ""> 
<р> 
<ВИТТОМ опсИсКк = "ту()">Нажми здесь</ВитТТОМ> 
</ЕНОВМ> 
</НТМЕ> 


На рис. 2.4 показано соответствие тегов элементам веб-страницы в окне браузера 
объектам. Поскольку ни для одного из элементов документа не указан атрибут Ш 
(или МАМЕ) обращение к объектам возможно посредством индексов. Так, напри- 
мер, для обращения к объекту графического объекта (он у нас единственный) 
можно использовать следующее выражение 

доситеп* . 1тарез (| // первый элемент коллекции Итазез 
Кнопка является вторым элементом формы. Чтобы обратиться к ней как к объек- 
ту, необходимо указать сначала форму (единственная форма в документе есть 
объект юпп5(О)), а затем объект этой формы (@етепЛ5(индекс_элемента)). Други- 
ми словами, достаточно записать выражение: 

лоситепу . Рогт$ (9 \етеп{$ (1) // второй элемент формы 
Теперь обратимся к объекту ссылки в нашем документе. Все ссылки хранятся 
в коллекции НиК$. В нашем случае коллекция ПпКз$ содержит лишь одну ссылку. 
Следовательно, наша ссылка —элемент ПпК$( О) массива ПпК$з. В итоге для обраще- 
ния к ссылке в НТМГТ-документе достаточно написать следующее выражение: 

аоситеп{.ИпК$(0) 
Обобщая вышеизложенное, отметим, что универсальный способ обращения к объ- 
ектам документа — обращение посредством коллекции а|. Лично я предпочитаю 
именно этот способ обращения к объектам. Однако если вы не позаботились об 
атрибуте Г в тегах элементов НТМТ-документа, которые должны стать жертвой 
ваших сценариев, то обращение к объектам через аП посредством индексов, осо- 
бенно в случае объемистого документа, становится проблематичным. Чтобы убе- 
диться в этом, внимательно отнеситесь к следующей задаче. 


Допустим, у нас есть некоторый НТМГ-документ. Пусть для определенности это 
будет документ, рассмотренный в предыдущем примере. Интересно, какие имен- 


128 


Глава 2. Основы создания сценариев 


Моя УеБ-страница 


, <йету. пит И Блокнот _ 
| № ГЕНТМЫ | 
вЫ { оя веб-страница</Н1> 
} + Мс 5АС='рсйро’> 
5..: — < АНВЕЕ = ‘ммм. адтлиа!.ги/Чипаеу>СайТавтора</А> 
_ Мы Ре <РОАМ» 
у итОра — Г УРЕ= Чехё МАШЕ = "> 
< ё 
ТОМ>Нажмиздесь<ЛЗитТо1 М> 
4. 
ры <ИНТМЬ> 
|1 ыы Г 
доситеги | р ия авы 
у жи 
у 'тадез(0) -->= Кб) 
; ‚ 


Рис. 2.4. Соответствие тегов элементам веб-страницы и объектам 


но теги этого документа соответствуют элементам коллекции! объекта аоситеи? 
Чтобы ответить на этот вопрос, я написал простой сценарий и вставил его в конце 
тестируемого НТМТ-лдокумента. Этот сценарий основан на использовании свой- 
ства {а Мате, которое возвращает название тега, с помощью которого был создан 


соответствующий объект. Код сценария приведен в листинге 2.1 


Листинг 2.1. Тестируемый НТМЕ-код вместестестирующим сценарием 


<НТМЕ> 


веб-страница</Н1> 


<р> 
<М@, 98С = 
<р> 
<А НВЕЕ = 
<> 
‘РОВМ” 
<ТМРОТ ТУРЕ = 
<р> 
<ВОТТОМ опс11ск 
</ЕОВМ> 
<ССВТРТ> 
шза = "" 
Рог(1 = 0; 
089 + 1+" " 


а1егЕ (134) 


"сехё" 


{. а11 . 1епдев; 
её . а11 [1] . КадМаше + 


"руст.]рд"> 


"улиг. аби1 га1 . га/-алпаеу">СааТ автора</а> 


УАБОЕ = ""> 


"ту()">Нажми здесь</ВиТТоМ> 


1++) { 
и \п" 
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</ЗСВРТ> 
</ИТМР> 

В результате выполнения этого НТМГ-кода окно браузера будет выглядеть, как по- 
казано на рис. 2.5. В диалоговом окне, выведенном с помощью аецО, перечислены 
теги НТМГ-документа. Их порядковые номера соответствуют индексам в коллекции 
а. Например, объекту дЧоситеп{.аП(5) соответствует элемент НТМГ-документа, со- 
зданный тегом МО>. Обратите внимание, что хотя теги <НЕАО>, <ТПТЕ> и <ВОО\> в 
нашем документе явно не упоминаются, соответствующие им объекты присутствуют 
в объектной модели этого документа и, следовательно, в коллекции а 


Е] С\Мом документы \ му? Ыи- Мсохой НиеглеЕЕ крим 


НО 


Мсгозой Ниете! Ехрюлег Я 


$ ОНТМЬ 
№  РНЕАО 
Е ИТЕЕ 
зву 
41 

516 


< БА 

ь -—№ БА. 
У, п . ?РОЯМ 

4 Бе | СТ Ж/ я ЗНРИТ 


ЭР 
Г 4 10 ВОттом 


11 ЭСАРТ 
Нажми ЗДеСь | ._ К е ] 
у 


| Отюрытне стр: 2 | Мой компьютер 


Рис. 2.5. В диалоговом окне перечислены теги НТМ!-документа и их индексы в коллекции а! 


Теперь рассмотрим тот же пример, но добавим к основным тегам атрибуты 1О, 
с помощью которых можно персонифицировать соответствующие объекты. Как 
и раньше, мы добавим к НТМГ-документу сценарий, выводящий окно с инфор- 
мацией о тегах. При этом, кроме порядкового номера и названия тега, мы будем 
выводить и значение атрибута Ш (рис. 2.6). Чтобы получить значение атрибута 
О, необходимо воспользоваться свойством 14 соответствующего объекта. НТМТ- 
код приведен в листинге 2.2. 


Листинг 2.2. Тестируемый код с добавлением атрибутов 0 
<НТМЬ> 
<Н!>Моя веб-страница</Н1> 
«Мб 10 = "тутаде" $9 = "р!с+.]ро"> 


<А 10 = "туге!" НАЕЕ = "м\мм.адтига!.ги/-аипаеу">Са ОТ автора</а> 
<РОВМ 10 = "туюгт"> 

<ТМРОТ ТР = "муфарае" ТУРЕ = "бехе" УАБОЕ ="аеме"> 

<р> 


<ВИТТОМ 10 = "туби Нот" опсИсКк = “ту () ">Нажми здесь</В1ЯТСШ» 
</ЕОВМ> продолжение & 
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Листинг2.2 (продолжение) 


<ЗСВТРТ> 

пза = 

Рог (1 =0; 1<Яоситейе .а11.1епоЕВ; 1 +-6 ) { 
п549+= 1 + " " + аосотепе.а11[1].сааМаше + “” 14 = "+ адоситет.ай [1] .1а 
+"\ю" 


} 

а1екЕ (за) 
</5СВТРТ> 
</НТМГ> 


% СЛМам ашчмвнгьЛвмй ит - ЫЙ№Е<!И Ыдае! Ех! | Г _.. &ШШ 


1. 
| 


оао Пыя 


Моя У’е-страница 
зы 


"НМ :а- 
1 НЕАБ 4 = 
ИЦЕк = 
‚ ЗВ06\У 9» 
` ДНЯ! 
61М$ а * пиммое % 
БА к! жпуде! 
7 РОВМ Ю = пота 
СМ РОТ Ир ии 
ЭРч= 


1ОВОТТОМ = = вубиюл 
11 $СЯРТ «= 


#] "Открытые Стр 


Рис. 2.6. Теги НТМЕ-документа, их индексы в коллекции ай, а также значения атрибутов Ш 


Итак, универсальный способ обращения к объекту документа базируется на ис- 
пользовании коллекции а|. Однако кроме него в 1Е5+ и ММ№ 6 существует еще один 
способ, основанный на методе зе Нетег(ВУЗО: 
аоситепЕ. се Е1етеп(Ву 14(значение_Ю) 

Обратите внимание, в каком регистре пишутся отдельные буквы этого метода. 
Метод эеетеп(Ву19 (значение Ю) позволяет обратиться к любому элементу по 
значению его идентификатора — значению атрибута ТО. Если несколько элемен- 
тов документа имеют одинаковый ШО, метод возвращает первый элемент с указан- 
ным значением ГО. Отсюда видно, насколько важно присваивать различным эле- 
ментам уникальные значения Г. 


Выше мы рассмотрели различные способы обращения к объектам. Ссылки на объ- 
екты часто используются, главным образом, как промежуточный этап для досту- 
па к конечным свойствам и методам. В конце концов, именно они и интересуют 
нас при создании сценариев. Заметим попутно, что ссылки на объекты можно со- 
хранять в переменных, которые потом можно использовать для обращения к свой- 
ствам и методам. 
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В приведенном выше примере элемент изображения, созданный с помощью тега 
МО ШО = "туплаее" ВС = "р1сё]рэ">, имеет атрибуты Ш и $КС. Этим атрибутам со- 
ответствуют свойства 14 и гс объекта этого изображения. Ниже приведены при- 
меры различных вариантов обращения к данным свойствам: 

ЗоситепЕ . 1тарез (6 } // "туитаде" 

Чосимепе. 1тадез ("пу1паде") . 14 
Чосимепе .а11 ("мултаде").1а 
Чоситепе.а11.муттаде.1а 
уаг х = ЯЧосимепёе.а11.туладае // объект 
// "ту1маае" 
Чоситепе.1тадез (0).зхс /* строка ОВЬ, например, 
ЕПе: ///С: /Мои%20 документы/р1сё.)ра */ 
босищепе .1тадез ("му 1таде").зхс 
Чосимере .а1 1 ("муттаде") .згс 
Чоситепе.а11.му1таде. гс 
уаг х = ЯЧосомепе.а11.пушиаде // объект 
^ /* строка ОВЬ, например, 

Е11е:,/././С; /Мои%20документы/р1се . ра */ 


Объекты документа имеют много интересных и полезных свойств. Одни из них 
доступны только для чтения и могут использоваться в сценариях в качестве ин- 
формации для выполнения каких-то действий. Другие свойства можно изменять, 
то есть присваивать им иные значения (например, для изменения рисунка доста- 
точно изменить значение свойства згс). В следующей главе мы рассмотрим, для 
чего служат конкретные свойства и методы. 


[© 


2.4. Понятие события 


Каждое действие пользователя (нажатие на клавишу, щелчок кнопкой мыши 
ит. п.) формирует некоторое событие, то есть сообщение о произошедшем. Опе- 
рационная система (например, \п94о\з$) анализирует это сообщение, чтобы уз- 
нать, откуда оно взялось и что с ним делать дальше. Если, например, пользователь 
нажал на кнопку мыши в момент, когда ее указатель находился над окном браузе- 
ра, то \Мпдом$ пошлет браузеру сообщение о том, какая кнопка мыши была на- 
жата, какие при этом клавиши клавиатуры удерживаются, а также координаты 
указателя мыши. Если пользователь щелкнул где-то на панели инструментов, 
браузер отработает это сообщение сам. Если же в момент щелчка указатель нахо- 
дился на «территории» НТМГ-документа, то браузер пропустит сообщение о со- 
бытии через свою объектную модель. В НТМГ-коде документа может находиться 
сценарий для обработки этого события. Инструкции этого сценария направляют- 
ся к браузеру опять же через объектную модель. 


2.4.1. Свойства события 


Сообщение о событии формируется в виде объекта, то есть контейнера для хране- 
ния информации. Как только объект события создан, браузер присваивает значе- 
ния его свойствам. Например, объект, соответствующий щелчку мышью, содер- 
жит координаты указателя мыши, а также сведения о том, какая кнопка была 
нажата. Кроме того, объект события в одном из своих свойств содержит ссылку 
на элемент, с которым связано данное событие (например, на кнопку, изображе- 
ние, поле ввода ит. п.). 
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Объект события хранится в памяти столько времени, сколько необходимо сцена- 
рию для его обработки. Пока выполняется обработчик события, объект события 
вместе со своими свойствами доступен сценарию, находящемуся в памяти брау- 
зера. Как только обработчик события завершит работу, объект события становит- 
ся пустым (возвращается в исходное состояние). 


В любой момент времени существует не более одного объекта события. Все ини- 
циированные события заносятся операционной системой в буфер и выполняют- 
ся последовательно в том порядке, в каком они туда попали. 


В объектной модели имеется объект еует, являющийся под‘ объектом объекта окна 
У\шдо\. Он содержит информацию о том, какое событие произошло, какой эле- 
мент должен на него реагировать, и ряд других характеристик. Объект еуеп( можно 
использовать в сценариях для документов с большим количеством интерактивных эле- 
ментов, для выяснения причин неправильного отображения веб-страниц. Далее мы рас- 
смотрим некоторые наиболее часто используемые свойства объекта еуепе. 


В качестве примера ниже приводится НТМТГ-документ, не содержащий видимых 
элементов. Щелчок мышью или нажатие клавиши на клавиатуре выводит диало- 
говое окно со значениями некоторых свойств объекта еуепЕ (рис. 2.7). Так, свой- 
ства х и у содержат значения координат указателя мыши в момент щелчка, от- 
ч итанные в данном случае относительно окна браузера. Свойство КеуСо4е возвращает 
код нажатой клавиши с символам в системе Опсоде. Для латинских и цифровых 
символов кодировки Цтсоае и АЗСП совпадают. При нажатии навигационных кла- 
виш и клавиш дополнительной цифровой клавиатуры КеуСо4е возвращает пиП. По 
существу, КеуСо4е — это код соответствующего символа, а не код клавиши. Для фик- 
сации самой клавиши используются события опкеудо\пт и опкеучцр, а не оп Кеургез5. 


[3 С \мом докоменгы\еччеви ле БВв- 


Рис. 2.7. Щелчок в окне браузера выводит сообщение о координатах указателя 
мыши и нажатой клавише 


<НТМЬ> 

<ВОрУ Ш = "{е51"> 

</ВОрУ> 

<$СВТРТ> 

Гапс оп {езЕ .опсИСКС) { 

маг $\ 

{г += "х = " + мтадом.еуепт.х + "\п" 
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$4 += "у = + мтаом.еуепт.у + “\п" 
$1г += "Вы нажали клавишу: 
И (мидом. еуепЕ. ЗП ГЕ Кеу) {$4г += "ЗВЕНЕ" } 


НИ (м!пдом. еуепЕ. с" [Кеу) {$4 *= "СЫ" } 
И  (м!пдом. еуепЕ. а Кеу) {54г += "АП"} 
а1егЕ($ег) 


) 


ГапсНоп &е5$& .опКеурге$$О{ 


а Г д клавиши: " + уа9оу.еуепе.КеуСоае) 


</ЗСВРТ> 

<тмг> 
В ТЕ версии 4.0 и старше среди прочих часто оказываются полезными свойства 
БаНоп и згсЕйтетепе. 


Свойство Би Йоп возвращает целочисленное значение, указывающее, какая кноп- 
ка или кнопки мыши были нажаты (табл. 2.1). 


Таблица 2.1. Значения свойства Бийоп 
Значение Описание 


0 Кнопки не нажаты 
] Нажата левая 
2? Нажата правая 
Одновременно нажаты левая и правая 
4 Нажата средняя 
Нажаты левая и средняя 
6 Нажаты правая и средняя 


7 Все три кнопки нажаты 


Свойство гс Ыетеп{ возвращает ссылку на объект элемента НТМГ-документа, кото- 
рый инициировал событие. При получении такой ссылки можно узнать или изме- 
нить значения свойств этого объекта и применить к немулюбой из его методов. 


Приведенный ниже НТМГ-код формирует документ, содержащий две кнопки 
(рис. 2.8). Сценарий обрабатывает событие опейск — щелчок мышью. Он привя- 
зан к элементу, заданному тегом <ВОРУ>. Щелкнуть можно налюбой кнопке, атак- 
же на незанятом месте окна браузера (рис. 2.9). В любом случае событие опсИсК 
будет обработано сценарием (функцией свапгеех О), поскольку кнопки заданы 
внутри тега <ВОБ\?. Сценарий заменит текст, который находится внутри тега эле- 
мента, инициировавшего событие. Какой именно элемент инициировал событие, 
определяется с помощью свойства згсЕ1етепф, а замена текста осуществляется по- 
средством свойства шпегТех(. Об этом свойстве мы еще поговорим отдельно. Об- 
ратите внимание, что результат зависит от того, где находился указатель мыши 
в момент щелчка. 

<НТМЬ> 

<ВОС/ опсИск = "сНапде{фех{()"> 

<БиНоп>перза« КНопКа</бийоп> 


<Би11оп>Вторая КНопКа</бийопт> 
</ВОБУ> 
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<ЗСВТРТ> 

ЕорсЕ1оп сБапдееехео{ 

х = этоадом.еуепе .згсЕ1етепе // ссылка на объект 
х.1прегтТехЕ = "Уж щелкнули' // замена текста 

} 

</5СВТРТ> 

</НТМЬ > 


Уже нажали 


Рис. 2.9. Результат щелчка на свободном месте 


Чтобы на щелчок реагировали только кнопки, приведенный выше код необходи- 
мо несколько модифицировать: 


<НТМГ> 

<ВОрУ> 

<БиЕЕоП опс11ск = "сваиветех{ ()">Первая кнопка</Би{топ> 
<Баббоп орс11ск = "сБапдевехе ()">Вторая кнопка</Би{оп> 
</ВорУ> 

<ЗСВТРТ> 

Еорсе1оп сБападееехео{ 

х = \шдоу.еуепЕ. гс ешепЕ // ссылка на объект 
х.1ппегТехЕ = "Уж щелкнули" // замена текста 
} 

</ЗСЕВТРТ> 


</ятмг> 
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Объект еуепЕ имеет несколько свойств, содержащих координаты в пикселах ука- 
зателя мыши в момент возникновения события, связанного с мышью. Многооб- 
разие типов этих координат обусловлено различиями в начале их отсчета. Рас- 
смотрим эти свойства по порядку. 


зстеепХ, зстеепУ — координаты указателя мыши относительно левого верхнего 
угла экрана. Например, если экран монитора находится в режиме 800х600, то 
координаты правого нижнего угла экрана будут равны 800 и 600 пикселов со- 
ответственно. 


сПепЕХ, сНепеУ — координаты указателя мыши относительно области клиента 
(рабочей области браузера), в которой находится НТМТГ-документ, без учета 
рамок, полос прокрутки, меню ит. п. 


ойбееХ, обе’ — координаты указателя мыши относительно верхнего левого 
угла элемента, инициировавшего событие. 


х, у — координаты указателя мыши относительно верхнего левого угла первого 
абсолютно или относительно позиционированного контейнера, в котором на- 

ходится элемент, инициировавший событие. Позиционированный контейнер — 

этоэлемент, заданныйкаким-нибудьконтейнернымтегом (например, <ВОРУ>, 

<П\У>, <Н1>) с атрибутом ЗГМЕ для которого указано свойство розШюоп. Если 

такого контейнера нет, то свойствах и у возвращают координаты относитель- 

но главного документа, такие же, как и сПепиХ, сПешУ. 


Чтобы лучше разобраться в этих свойствах, создайте тестовый НТМТ-документ, 
как показано ниже, и поэкспериментируйте с ним, щелкая мышью в различных 
точках (рис. 2.10). Этот документ содержит два контейнера, созданных с помощью 
позиционированных различным образом тегов <ОТУ>. Первый контейнер пози- 
ционирован абсолютно, а второй, вложенный в него, — относительно. Сценарий 
определяет значения координат различных типов и отображает их в диалоговом окне. 


| 34, 9 80 
| 052234, оНзе (#90 
х= 286, уз1 32 


2] Готоео ро 


Рис. 2.10. При щелчке выводится окно с различными типами координат указателя мыши 
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<НТМ1 > 

<ВОруУ ТО = "МуБоду" 

<РТУ ТО = "ОТУ1" ЭТУБЕ = оба тет ; (ор:50; м1а6Ь:30!9 
Ве198е:100; Баскагоицпа-со1ох:Ь11е"> 

<ОТУ 10 = "БОТУ!" УТУБЕ = "ров1Е ге1а1уе; 1е#Ёе:50; 40р:2575; и1960:200; 


Ве1986:50; Баскагочпа-со1ог:уе11ои"> 


<ВОрУ> 
<ЭСВТРТ> 


ЕопсЕ1оп @аоситеп\ { 
уаг е = м1ааои . еуепе ТТссылка на объект еуепе 
уагк зЕх = "ТР = " че. асан а. + 

"\п эзсгеепх= " че. эс № зсгеепу= + е. сстеепу 

"\п с11епеХ=" + е.с11епёех + ‚ о]елеу Ей ‚ 

"\п ОЕЕВеЕХ=" + е. оЕЕзебх +". оЕЕсеку=" + е. оЕЁзесу 1 

"\п ОЕЕвесх=" те. ОЕЕзеёх +", оЕЕзебсу=" +е. оЕЕзебу 

Ее о К ру вау 
а1еге (6х) 


</5СВТРТ> 

</нНтТмЬ> 
Нам требовалось, чтобы на щелчок реагировал любой объект документа, поэтому 
мы не стали привязывать обработчик события индивидуально ко всем элемен- 
там, а вместо этого назвали функцию-обработчик составным именем доситеп. 
опсИскК(). 


Обратите внимание на использование свойства згс Е|!етепЕ для получения значе- 
ния 14 элемента, инициировавшего (или, как еще говорят, получившего) событие. 


У объекта еуепё имеется изменяемое свойство гегагпУ\Уа№ше (возвращаемое значе- 
ние). С его помощью можно отменять действия, принятые по умолчанию. Для 
этого достаточно присвоить ему значение #15е. Например, щелчок на ссылке по 
умолчанию означает переход по указанному адресу. Однако вы можете отменить 
это действие или запросить у пользователя подтверждение перехода. 


Пример 


<НТМЬ 
<А О = "туге"" НВЕЕ = "мммм.спа{. ги’>Переход на спа{.ги</А> 
<5СНРТ> 

ГипсНоп шугеЁ. опс СКО { 

гег = соп! действительно хотите перейти?" 

и ге) 

ушдоу. еуеп{ . геёигпиУаШше = Га1зе 


} 
</5СВТРТ> 


</НТМГ> 
Здесь метод сопЙгт() выводит диалоговое окно. Если пользователь не подтвердил 
переход, то сопйгт() возвращает Ёа15е, а свойству гегигпУа|ае тоже присваивается 
[а15е. В результате переход по ссылке не произойдет. 


Нередко требуется разместить в документе элемент, который внешне выглядит, 
как обычная ссылка (при наведении указателя мыши его вид изменяется), но щел- 
чок должен приводить не к переходу на другой документ, а просто к выполнению 
некоторого сценария. Этого можно добиться несколькими способами. Один из 
них основан на использовании свойства геигиУаше: 
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<НТМЕ> 
<А Ш = "туге!' НКЕЕ = "">Щелкни здесь</А> 
<5СВТРТ> 
Гапс оп шугеЁ.опсИсК(){ 
а!ег( ("56 т щелчок на ссылке”) 
утаом.еуепт.гефигпУаше = Га|1зе 


} 
</ЗСВРТ> 
</нтмг> 


Если бы мы не использовали оператор \уш@до\.еуепегеигиУаше = #а15е, то из-за не- 
указанного в НКЕЕ адреса перехода по ссылке после выполнения обработчика со- 
бытия открылось бы новое окно браузера с содержимым текущей папки. 


Другой способ отключить действие щелчка на ссылке, принятое по умолчанию, 
заключается в том, чтобы в значении атрибута НВЕЕ написать "Т', как в следую- 
щем примере: 

<А ЮР = "туге' НАЕР = "# | пу ">Щелкни здесь</А> 


2.4.2. Прохождение событий 


Как уже отмечалось выше, для элементов документа можно указать события, на 
которые они должны реагировать, и обработчики этих событий. Например, если 
требуется, чтобы элемент реагировал на щелчок кнопкой мыши выполнением не- 
которой функции туйшс()›то в тег этого элемента следует вставить запись: опсИск = 
"туйшсО". Однако нам известно, что большинство тегов в НТМГ являются кон- 
тейнерными и, следовательно, могут содержать в себе другие теги. При этом мо- 
жет оказаться так, что одно и то же событие будет обозначено в различных, но 
вложенных друг в друга тегах. Что произойдет при наступлении этого события? 
Как оно распространяется по объектам и как оно перехватывается элементами 
документа? 


Рассмотрим в качестве примера следующий НТМГ-документ, содержащий един- 
ственную кнопку: 


<НТМ1_> 

<ВООУ опс11ск = "а1егё('Щелчок на Боду')"> 

<ВОТТОМ опс11ск = "а1ег®('Щелчок на Баебоп') ">Нажми здесь<‹/Виттом> 
</ВОБУ> 

</НТМЫ> 


Особенность этого документа в том, что одно и то же событие (с различными о0б- 
работчиками) привязано к различным тегам, один из которых содержит в себе 
другой <ВОТТОМ> содержится в <ВОБуУ”>). Щелчок на кнопке приведет к выполне- 
нию сначала обработчика щелчка для кнопки, а затем обработчика для <ВОБУ>. 
Если щелкнуть где-нибудь в рабочей области окна браузера вне кнопки, то срабо- 
тает только обработчик для <ВОБ\У>. Ниже мы рассмотрим, как можно избавиться 
от этого нежелательного эффекта. 


Модели прохождения событий в Пиеге Ехрогег и М№есаре Маумезжог отлича- 
ются друг от друга. Более того, имеются различия между этими моделями для 
различных версий одного и того же браузера даже начиная с 1Е4 и ММ4. 

Модель прохождения событий в [Е4 называется «всплыванием событий». Собы- 
тия, подобно воздушным пузырькам в воде, как бы всплывают от целевого объек- 
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та самого нижнего уровня вверх по иерархии объектов. В рассмотренном выше 
примере событие опсПсК «всплывает» от объекта кнопки к объекту тела докумен- 
та. В М№ММ№4 модель прохождения событий называют захватом событий. Согласно 
этой модели событие распространяется, наоборот, от самого верхнего в иерархии 
объекта уш4о\ к целевому объекту. Чтобы события обрабатывались на уровне 
текущих объектов, требуется включить для них режим захвата. Это делается с по- 
мощью специального метода сарагеЕуеп О. В ТЕ4 для управления всплыванием 
событий используют свойство прерывания вс! плываниясапсе|ВибЫе. 


В современных браузерах 1Е5.5+ и М№М№б реализована модель, объединяющая в себе 
ивспилывание, и захват событий. Всплывание организовано как в [Е 4+, азахват — 
как в ММ№4. По умолчанию событие всплывает, однако вы можете включить его 
захват. Тогда событие сначала достигает целевого объекта, а затем начинает всплы- 
вать в обратном направлении. 


ВТЕ4-+ управлять прохождением событий можно с помощью свойства сапсе1 Вибе 
объекта события еуепё. Когда в документе (на веб-странице) происходит какое- 
либо событие, объект еуе{ первым получает информацию о нем и решает, какому 
элементу его передать. Например, когда объект еуеп( получает событие опсПск 
(щелчок кнопкой мыши), он выясняет, какой элемент находился в тот момент 
под указателем мыши. Если там было два элемента (один над другим), то выбира- 
ется элемент с наименьшим 7-индексом, то есть нижний. Напомню, что 7-шаех 
является одним из параметров позиционирования элементов с помощью таблиц 
стилей. Установив элемент, связанный с событием, объект еуеп( ищет обработчик 
этого события и выполняет его. Например, если элемент имеет уникальное имя 
(О) Муеетепе, то ищется функция Му@етет.опсИскКоО. Далее объект еуеп{ выясня- 
ет, какой объект является контейнером для данного элемента. Если таковой име- 
ется, то событие переходит внутрь этого контейнера. Если, например, контейне- 
ром является объект, созданный тегом <Г/У> с именем Муах, то будет предпринята 
попытка выполнить функцию МуФу.опсКО. Этот процесс продолжается, пока 
имеются доступные контейнеры. Например, последним доступным контейнером 
может оказаться документ (объект 4оситеп!), и тогда объект еуепё ишет функцию 
оситепе.опсИско. 


Чтобы определить главного виновника события (объект, инициировавший собы- 
тие), используется свойство згсЕетеп. Мы уже говорили о нем выше. Например, 
может потребоваться одинаковая реакция на одно и то же событие всех элементов, 
за исключением некоторых. В таких случаях для элементов, на которых процесс 
всплывания события должен закончиться, создаются специальные функции-об- 
работчики. В этих функциях помимо прочего должно быть выражение присвое- 
ния свойству сапсе1Вибе значения {гие, чтобы прервать дальнейшее прохожде- 
ние события. Например, если мы хотим разорвать цепную передачу события на 
элементе с именем Муе!етепе, необходимо создать для него функцию-обработчик 
события следующего вида: 

ТипсНоп Муеетепт. опсИскО{ 

// код обработки события опсйск 

уипао\м/.еуепт. сапсе!Вирые = {гие 

} 
Делать такое в функции-обработчике для объекта доситепе бессмысленно, по- 
скольку выше событие все равно всплыть не может, а отменить реакцию на это 
событие элемента-инициатора (первого звена цепочки) невозможно. 
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В начале этого подраздела мы уже рассматривали пример НТМГ-документа 
с кнопкой, вложенной в контейнер <ВООУ>: 


<НТМЬ> 

<ВОПУ опсИсКк = "айегё('Щелчок на Ъоду’)"> 

<ВОТТОМ опсИск = "айегё (‘Шел‘чок на МН ыы В) ">Нажми здесь</В\ М> 
</ВОБУ> 

</НТМГ> 


Особенность этого примера в том, что если пользователь щелкнет на кнопке, сра- 
ботает обработчик не только кнопки, но и тела документа (элемента, заданного 
тегом <ВОБуУ>. Если мы хотим это предотвратить, то можно переписать код следу- 
ющим образом: 


<НТМЕ> 

<ВОБУ опсИсКк = "эегё('Щелчок на Боду’)"> 

<ВОТТОМ опсИск = "аегё('Щелчок на Би оп’); 
ушдоу.еуепт „сапсе! Вибе = {гие ">Нажми здесь</ВИТТОМ> 
</ВОБУ> 

</НТМЕ> 


Возможен также и такой вариант кода: 


м 


<ВООБУ опсИсКк = "аегё('ШЩелчок на Боду’)"> 


<ВОТТОМ Ш = "МуБи`>Нажми здесь</В1ЛТОМ> 
</Вов\> 
<$СВТРТ> 


Рапсиоп МуБиЕ.опеИсКк() { 

а1егё ('Шелчок на Би оп‘) 

утшдом.еуепЕ.сапсе! Вибе = {гие // прекратить всплывание события 
Т 

</5СВТРТ> 

</НТМГ> 


2.4.3. Указание обработчика события в сценарии 


Об обработчиках событий достаточно подробно рассказывалось в предыдущем 
разделе. Там так или иначе обработчики событий привязывались к специальным 
атрибутам НТМГ-тегов — Ш или атрибутам-событиям — РОК и ЕУЕМТ. Сцена- 
рий-обработчик выполнялся, если возникало событие, связанное с элементом, для 
которого был указан этот обработчик. Вместе с тем имеется возможность вызы- 
вать обработчик & сценарии просто как метод объекта. Он будет выполняться так 
же, как и при возникновении соответствующего события. 
Пример 

<НТМЕ> 

<ВИТТОМ 10="МубиНоп" опсИск=" Бис ИСК () ">Нажми здесь</ВитТТОМ> 

<УСНРТ> 


досите 


} а Мубит 1 11СК ( // вызов обработчика 
РапсНоп  БисИсК(){ 

а1ег((' Щелчок на кнопке МуБи опт’) 

1 

</ЗСВТРТ> 

<иНтмг> 
В данном случае сразу же после загрузки документа в браузер вызывается об- 
работчик события опсПск, связанного с кнопкой. Этот обработчик — функция 
Бис ПсКк(). Обратите внимание, что обработчик выполнится несмотря на то, что 
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самого щелчка не было. Заметим, что выражение вызова метода (в данном случае 
это о.опсёсКО) должно записываться только строчными буквами. 


Следует иметь в виду, что рассмотренный выше способ использования обработ- 
чика как метода существенно отличается от эмуляции действия для события. 
Например, допустим, что имеется форма с несколькими полями для ввода дан- 
ных, одно из которых имеет обработчик события опюосиз$ (активизация поля). Что- 
бы поле активизировалось, необходимо щелкнуть на нем мышью или перейти 
к нему с помощью клавиатуры. При этом сработает обработчик события опосиз. 
Однако даже если поле не активно, обработчик события опосиз все равно можно 
вызвать, но при этом поле не активизируется: 


Чоситет{.имя_формы.имя_поля.оптоси$О 


Благодаря возможности использовать обработчик события в качестве метода объ- 
екта можно задавать обработчик в виде функции, имеющей название, совпадаю- 
щее с названием события: 


<ВОПУ оп1оаа = "ошоааО" 


</восм> 
<5СВРТ> 
РАпсНоп ощоа90 { 


</ЗСВРТ> 
</нтмь> 


2.5. Работа с окнами и фреймами 


Как известно, НТМГ-документ загружается в окно браузера. Можно открыть не- 
сколько таких окон и загрузить в них различные документы, атакже разбить одно 
окно на несколько прямоугольных областей, называемых фреймами. В каждый 
такой фрейм можно загрузить отдельный документ. При этом существует воз- 
можность организовать взаимодействие между фреймами — например, с помощью 
действий в одном фрейме управлять содержимым другого фрейма. 


Загрузка в браузер НТМГ-документа приводит к тому, что в браузере создается 
иерархическая объектная модель этого документа, на самом верхнем уровне ко- 
торой находится объект уш@4о\. Доступ к свойствам и методам данного объекта 
имеет уже знакомый вам синтаксис: 


МИПЧО\/. СВОЙСТВО 

м! пао\м.методе[параметры]) 
У объекта \1пдо\ имеется синоним $еЁ, используемый при обращении к окну, со- 
держащему текущий документ. Иначе говоря, идентификатор $е{ применяется 
в многооконных или многофреймовых системах, когда требуется указать окно 
с документом, в котором находится данный сценарий. Его рекомендуется встав- 
лять, чтобы не запутаться. При запуске сценария в ссылках на объекты только 
текущего документа (типичная ситуация) идентификаторы \1пдо\м и зе! можно 
опускать. 
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У объекта \1ш4о\/ есть ряд пор'о бъектов. Мы уже рассматривали некоторые свой- 
ства объекта события еуепй, который является подобъектом объекта \шао\. Дру- 
гой объект, 1осайоп, содержит информацию, полезную для работы в сети и для 
создания ссылок в документах с многофреймовой структурой. Кроме этого, свой- 
ство Пгег объекта 1юсаНоп используется для загрузки документа в текущее окно: 
мипЧом,, |осай оп. Пге{ = "иК1_-адрес_документа" 
Данный способ загрузки документов в текущее окно браузера доступен во всех 
версиях 1Е и ММ. В ПЕ можно использовать также и метод пауеае0: 
мтаом/.памгда{е("УРЕ-аЙрес_НОКуМенТа") 


2.5.1. Создание новых окон 


Главное окно браузера создается не с помощью сценариев, а автоматически, когда 
пользователь запускает браузер, а также при открытии документа с определен- 
ным ОКГ-адресом или другого файла. В НТМЕ открыть документ в новом окне 
можно с помощью атрибута ТАВОЕГ тега ссылки <А НВЕЕ =...>. Например, <А НКЕЕ 
= "Бер://АммутатЫ его" ТАКСЕТ = "пем\\пао\"> КитЫег</А>. 


С помощью сценария можно создать любое количество окон. Для этого применя- 
ется метод ореп(): 


м пдо\м.ореп([параметры]) 

Этому методу передаются следующие необязательные параметры: 
адрес документа, который нужно загрузить в создаваемое окно; 
. имя окна (как имя переменной); 

. строка описания свойств окна (Ратаге$). 


В строке свойств записываются пары свойство=значение, которые отделяются друг 
от друга запятыми. В табл. 2.2 приведен список свойств окна, передаваемых 
в строке Ееашгез. Значения уез и по можно заменить числовыми эквивалентами 
1 и 0 соответственно. 


Таблица 2.2. Свойства окна, передаваемые в строке {еа{игез 
Свойство Значения Описание 


спаппе!тоде уез, по, |, 0 Показывает элементы управления СНаппе! 


атецопез уез, по, 1, 0 Включает кнопки каталога 
Ти зсгееп уез, по, 1, 0 Полностью разворачивает окно 
пед Число Высота окна в пикселах 
1ен Число Положение по горизонтали относительно левого края экрана 
в пикселах 
'осаНоп уез, по, 1, О Текстовое поле Ааагез5 
тепибаг уез, по, 1,0 Стандартные меню браузера 
гезгеае уез, по, 1, 0 Может ли пользователь изменять размер окна 
эсгоПраг$ уез, по, 1, 0 Горизонтальная и вертикальная полосы прокрутки 
аи$ уез, по, 1,0 Стандартная строка состояния_^ продолжение & 
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Таблица 2.2 (продолжение) 


Свойство Значения Описание 

1оофаг уез, по, \, 0 Включает панели инструментов браузера 

тор Число Положение по вертикали относительно верхнего края экрана 
впикселах 

МОИ Число Ширина окна в пикселах 

Примеры 


мипао\м/.ореп("тураде. пт", "МемАМт", "Пе!9Н{=150, муа{=300") 
мт паом.ореп("тураде.п{т") 


зитеатиге$ = "{ор=100 ,1е{1=15, м!Ч{1=400, Пе!9Н1=200, 1осайоп=по, 
тепираг=по" 
1 у ("муммм.ааптта!.ги/-Чипаем", "Сам себе веб-ди 
эиТеафигез) 
Вместо третьего параметра (строки Еаге$) можно использовать значение фгие. 
В этом случае указанный документ загружается в уже существующее окно, вы- 
тесняя предыдущий. Например, удом.ореп(”туразе.Нет","Мем\Ут", (гие). 


Метод упдом.ореп () возвращает ссылку на объект окна. Эту ссылку можно сохра- 
нить в переменной, чтобы потом использовать, например при закрытии окна. 


Для закрытия окна служит метод 405$‘ Однако выражения у\до%.с1ю5е О или 
е () закрывают главное окно, а не дополнительное, которое вы создали ме- 

тодом ореп(). В этом случае как раз и необходима ссылка на созданное окно. Эту 
ссылку следует сохранить в глобальной переменной, чтобы иметь доступ к ней до 
тех пор, пока главный документ загружен в браузер. Вот пример: 

уаг об]мт = мипао\. ореп ("тураде. Н{т", "Моя страница“) 

об] мт. с1о$е () 
Метод У/п9о\.ореп[) открывает новое независимое окно как экземпляр браузера. 
В этом случае при закрытии главного окна браузера новое окно остается откры- 
тым. Независимые окна называют еще немодальными (п104а1е$$). Однако можно 
создать и так называемое модальное окно. Пока открыто модальное окно, пользо- 
ватель не может обратиться к другим окнам, в том числе и к главному. Так обыч- 
но работают стандартные диалоговые окна. Например, окна, создаваемые метода- 
ми а(), рготрЕ) и соф итО, являются модальными. В модальное окно можно 
загрузить любой документ. 


Для создания модального окна используется метод. 5по\МодаШ\яю?0. Так же, как 
и метод оре (О, он принимает в качестве параметров адрес документа (файла), имя 
окна и строку свойств. Однако формат этой строки другой. В частности, парамет- 
ры в строке разделяются точкой с запятой, размеры окна и координаты его верх- 
него левого угла требуют указания единиц измерения (например, рх — пикселы). 
Кроме того, этот метод не возвращает ссылку на объект окна, поскольку она не 
нужна для модального окна. 


В табл. 2.3 приведен список свойств окна, созданного методом $по\Мода 020, 
передаваемых в строке еа{игез. 
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Таблица 2.3. Свойства окна, созданного методом зпом/Мода\!а!ю9@_ 


Свойство Значения Описание 

огаег 1иСК, {И Размер рамки вокруг окна 
(толстая/тонкая) 

сетег уез, по (1, 0) Выравнивание окна по центру главного 

ЧаюдНеют: Число + единицы измерения Высота окна 

ЧНаюдЕей Число + единицы измерения Горизонтальная координата 

ФаюдТор Число + единицы измерения Вертикальная координата 

Чаюс\ЛОИ Число + единицы измерения Ширина окна 

ео Строка таблицы стилей Стиль, определенный по умолчанию 
для окна 

ющ-татйу Строка таблицы стилей Вид шрифта, определенный по умолчанию 
для окна 

п-зме Строка таблицы стилей Размер шрифта, определенный 
по умолчанию для окна 

ют-$Ме Строка таблицы стилей Тип шрифта, определенный по умолчанию 
для окна 

ощ-уапат Строка таблицы стилей Вариант шрифта (обычный/курсив), 


определенный по умолчанию для окна 


ощ-меют Строка таблицы стилей Толщина шрифта, определенная 
по умолчанию для окна 
вер уез, по, 1, О Включение кнопки Нер в верхнюю панель 
тахитее уез, по, 1, О Включение кнопки Мажитйе в верхнюю 
панель 
тштнтйе уез, по, 1,0 Включение кнопки Мите в верхнюю 
панель р Г 
Пример 
<НТМЕ> 
<ВОГТОМ опсИск = "гебагп Ореп\\щО ">0ткрыть окно 1 </ВОТТОМ> 
<ВОТОМ опсИск = "гесагп Ореп\Мп2 (?>Окрьшь окно 2 </ВОТТОМ> 
<$СВТРТ> 
уаг  пем/\\Мпаом // глобальная переменная для ссылки на окно 
ЕоросЕ1ор  ОрерИ1т1 () { // открытие 1-го окна 
у1паом. зЕабказ = "Первое окно" // статусная строка главного окна 
зехЕеабогез= "бор=100, 1еёЕ=50,и19В=300,Ве190Е=270,Еоо1Бах=по" 
итраом.ореп ("1. БЕ", "м1о1", зехЕеабоагез) 
Е 
псИоп Ореп\Ми20}{ // открытие 2-го модального окна 
ушдоу. $$афи$ = "Второе окно // статусная строка главного окна 
${гРеатигез = "@мюо2\УУ4=500рх;@4аюзНе2ВЕ=320рх ‚ Богдег=@щ ; Вер=по" 
Чо он МоОНЕС 2 МН, | я згЕеабагез) 
Еолсе1оп С1озем1ип1 () { // закрытие 1-го окна 
1Е (пемодом) { // если 1-е окно открыто 
пем\1паои .с1озе() // закрыть 1-е окно 
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пе\АМтаом = паП // очистить ссылку на 1-е окно 
у\ш4о\.$1а1и$ = 


</ЗСВТРТ> 
</НТМЕ > 


2.5.2. Фреймы 


Фрейм представляет собой прямоугольную область окна браузера, в которую мож- 
но загрузить НТМТ-документ. Разбиение окна на фреймы происходитс помощью 
НТМГ-кода, содержащегося в отдельном НТМГ-файле, который называется ус- 
тановочным. Установочный файл содержит только теги разметки фреймов, то есть 
их относительное расположение, размеры, ссылки на загружаемые в них доку- 
менты и другие параметры фреймов. В нем не должны присутствовать теги дру- 
гих элементов и текстовая информация, за исключением разве что тегов <МЕТА>. 
В установочном файле можно написать сценарий, создающий фреймовую струк- 
туру документа. 


Напомним, что разбиение окна браузера на несколько фреймов обычно произво- 
дится с помощью тега <ЕВАМЕЗЕГ>. Внутрь этого тега вставляются теги <ЕВАМЕ> 
с атрибутами, указывающими имя фрейма и адрес НТМГ-документа, который бу- 
дет отображаться в этом фрейме. В следующем примере создается два фрейма, 
расположенные друг над другом: 


<РВАМЕЗЕТ ВОМ5="30%,70%" 

<РВАМЕ 5ИС="документ1.Шт" МАМЕ=" Етате]1 "> 

<РВАМЕ 5КС="документ2.Шт" МАМЕ="Етате]1 "> 

</ЕВАМЕЗЕТ> 

</НТМГ> 
Это так называемое вертикальное расположение фреймов. Если вместо атрибута 
КОМБ в теге- <ЕКАМЕЗЕТ>использовать атрибут СОГ$, то фреймы будут расположе- 
ны горизонтально: второй фрейм находится справа от первого. Используя вложе- 
ние тега <ЕКАМЕЗЕТ>, можно разбить уже имеющийся фрейм на другие два фрей- 
ма ит. д. 


Отношения между фреймами и главным окном 


При разбиении окна на два фрейма в объектной модели браузера возникает иерар- 
хия объектов, в которой главное окно браузера представляется в виде главного, 
родительского фрейма, а созданные два фрейма являются дочерними фреймами, 
или, иначе, фреймами-потомками. При разбиении любого из этих фреймов на 
следующие два фрейма последние являются дочерними для исходного. Итак, меж- 
ду фреймами возникает отношение родители-потомки (родители-дочки). 


При запуске браузера объект главного окна \1ш4о\ формируется автоматически. 
Если в это окно загружается документ с фреймовой структурой, то главное окно 
получает статус родительского фрейма по отношению ко всем остальным. С дру- 
гой стороны, каждый тег<ЕВАМЕ> внутри контейнера <ЕВАМЕЗЕГ> создает свой соб- 
ственный объект\1шдоу\у,вкоторый загружается соответствующийдокумент. Каж- 
дому из фреймов соответствует свой объект доситеп!. С точки зрения объекта 
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4оситепЕ ему соответствует единственный контейнер — фрейм. Хотя родитель- 
ский объект и не виден пользователю, он все равно присутствует в объектной мо- 


дели. 


Документ! 


Рис. 2.11. Родительское окно и два фрейма 


Итак, в вершине иерархии находится окно браузера \1пдо\. Оно поделено на два 
фрейма с именами, например Нате! и гате2. Объект \уш9до\ является родитель- 
ским по отношению кдочерним гате] и гате2 (рис. 2.1 1). Для ссылки на роди- 
тельское окно используется ключевое слово рагепе. 


Допустим, пользователь активизирует некоторую ссылку в первом фрейме, но 
соответствующий документ должен загрузиться не в этот же фрейм, а в другой. 
Для решения этой задачи необходимо рассмотреть три случая: 


. главное окно получает доступ к фрейму-потомку; 
. фрейм-потомок получает доступ к родительскому (главному) окну; 


. фрейм-потомок получает доступ к другому фрейму-потомку. 


Между объектом \шао\ и объектами Нате! и Нате? существует прямая связь 
родитель-потомок. Поэтому если вы пишете сценарий в установочном файле, 
создающем эти фреймы, то к фреймам можно обращаться по имени, как это пока- 


зано нарис. 2.12. 


ааа = нии и Г = 
] Нате! пате2 


| 
| Документ! « С Документ^ 
Рис. 2.12. Обращение к фреймам по имени 


Иногда может потребоваться получить доступ к родительскому окну. Например, 
это бывает необходимо, если вы хотите при следующем переходе убрать все фрей- 
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мы. Удаление фреймов означает лишь загрузку нового документа вместо содер- 
жащего фреймы — в рассматриваемом случае загрузку документа в родительское 
окно. Это можно сделать с помощью доступа к родительскому окну на основе свой- 
ства рагепЕ (рис. 2.13). Чтобы загрузить новый документ, следует использовать 
объект 1осаЙоп из родительского окна (заметим, что каждый фрейм имеет соб- 
ственный объект 1осаНоп): требуется внести в 1осайоп.ВтеГродительского окна 
новый ОКГ-адрес. Таким образом, чтобы загрузить новый документ в родитель- 
ское окно, требуется записать в сценарии следующее: 
рагеп{.1осаНоп.Вге!="иг1-адрес_документа" 


>| мАпЧом/ 
| к км 


рагегЕ 


| Нате! | Нате? 


| Документ! ‹ [ Документ2 | 


Рис. 2.13. Доступ к родительскому окну на основе свойства рагет 


Наконец, довольно часто необходимо решать задачу обеспечения доступа из од- 
ного фрейма-потомка кдругому (рис. 2.1 4). Например, находясь в одном фрейме- 
потомке, можно записать что-нибудь в другой фрейм-потомок. Однако между 
фреймами-потомками не существует прямой связи. Поэтомумы не можем просто 
вызвать фрейм Нате? по имени, находясь во фрейме Ёйате!. Фрейм Нате! ничего 
не знает о Нашей, но Нате? существует с точки зрения родительского окна. По 
этойпричинемыдолжнысначалаобратитьсякродительскомуокну, затем — к_ате2, 
илишь потом к объекту Чоситеп(, который разместился во втором фрейме: 
рагепе. Нате? .4оситепе. ул 1е("Привет от первого фрейма! 


утдом 


Нате! | Нате? 


| Иан | [ И 


Рис. 2.14. Обеспечение доступа из одного фрейма-потомка к другому 


Рассмотрим, как можно изменить элемент в одном фрейме из другого. При щелч- 
ке на тексте в правом фрейме в левом изменяется один из текстовых элементов. 
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Ниже показаны НТМТ-коды соответственно для левого и правого фреймов, атак- 
же порождаемый ими внешний вид страницы (рис. 2.15). 
Документ в левом фрейме с именем ГЕЕЁ 

<НТМЕ> 


Один<В1?> 
Два 
<Н! О = "ХХХ">Три</Н1> 
</Нтме> 
Документ в правом фрейме: 


<НТМЕ> 

<5СВТРТ» 

ТипсНоп свапдед { 
рагеп{+.ЕРТ.аоситеп+.а!.ХХХ.ппегТехЕ = "Ура!" 
| 

</5СВТРТ> 

<Н1 опс11ск = "сфапаео( ) ">Щелкни здесь</Н1> 
</НТМИ> 


| Щелкни здесь 


Рис. 2.15. Изменение элемента в одном фрейме из другого 


В теле функции с Вапзе О, которая делает нужные изменения, происходит обраще- 
ние клевому фрейму с именем ГЕЕГ (задается в установочном НТМГ-файле) че- 
рез рагеп. Далее дос итет.аЙ.ХХХ обеспечивает доступ к элементу с идентифика- 
тором "ХХХ" (в примере это заголовок 1-то уровня). Здесь 4— — коллекция всех 
элементов документа. Собственно изменение элемента происходит за счет при- 
своения значения свойству шпегТехе (в примере это слово "Ура!"). 


Обратите внимание, что изменения в одном фрейме по событию в другом проис- 
ходят без перезагрузки НТМГ-документа. Для изменения элементов можно ис- 
пользовать, кроме шпегГехё, свойства ощегГех, шпегНТМЕ, и ое НТМГ. О них еще 
будет рассказано в подразделе 2.6.3. Выбор свойства зависит от того, что именно 
и насколько вы хотите изменить. 


Описанным выше способом вы можете организовать, например, такой сценарий: 
щелчок на миниатюре (маленьком изображении) в одном фрейме выводит в нем 
же полномасштабное изображение, а вдругом — краткое описание. 


Фреймы удобно использовать при создании навигационных панелей. В одном 
фрейме располагаются ссылки, а второй предназначен для отображения докумен- 
тов, вызываемых при активизации соответствующих ссылок. При активизации 
ссылки документ загружается не в тот же фрейм, где находятся ссылки, а в другой. 
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Пример 

Навигационная панель. Окно браузера разделено на два фрейма: первый выпол- 

няет роль навигационной панели, а второй — окна для отображения документов. 
атез. Рип - установочный файл. 


<НТМЕ> 

<РКАМЕ$ЗЕТ СОГ$ = "25%,75%"> 

<ЕКАМЕ 5ВС = "шепи.в{ш" МАМЕ = "шепи"> 
<ЕКАМЕ $ВС = "5(агЕ.Вш" МАМЕ = "шаш"> 
</ЕВАМЕЗЕТ>» 

</НТМЕ> 


Здесь Зай.Мт — документ, который будет первоначально показан во фрейме тат. 
п1 - навигационная панель. 


<ВТМЕ> 
<$СВРТ > 
Райс оп [о0а4(иг|) { 
раге! п. 1оса оп. ВгеЁ = иг; 
| 

</5СВТРТ> 

<ВОру> 

<А НКЕЕ = "] ауазсг!рЕ: 10а@( ' первый . Вт’) ">Первый< </А> 

<А НВЕЕ = "второй. Вет" ТАКСЕГ = "таш">Второй </А> 

<А НВЕЕ = “третий.Ви" ТАВСЕГ = "Чор">Третий </А> 

</ВОБУ> 

</НТМЕ> 
Здесь показано несколько способов загрузки новой страницы во фрейм таш. В пер- 
вой ссылке используется функция 10оа4(). Вместо атрибута ТАКОЕГ указания на 
фрейм выполняет функция. Функции |юадО в качестве параметра передается стро- 
ка’'первый.В@т', указывающая, какой файл следует загрузить. При этом место, куда 
он будет загружен, определяется самой функцией 10а4(). Во второй ссылке ис- 
пользуется атрибут ТАКОСЕТ. Третья ссылка показывает, как можно избавиться от 
фреймов. Чтобы удалить фреймы с помощью функции 1оа40О, достаточно напи- 
сать в ней следующую строку: 

рагепЕ.1осаНоп.Игеё = и] 


Атрибут ТАКОЕГТ в теге ссылки <А НВЕЕ> обычно применяется в тех случаях, когда 
требуется загрузить одну страницу в один фрейм. Язык сценариев используют, 
если необходимо при активизации ссылки выполнить несколько действий, на- 
пример загрузить несколько страниц в разные фреймы. 


Для ссылок из родительского окна к объектам его дочерних фреймов можно вос- 
пользоваться коллекцией Натез всех фреймов. Коллекция фреймов представля- 
ет собой массив объектов фреймов. Обратиться к конкретному фрейму из этой 
коллекции можно по индексу или по имени фрейма, указанному в качестве зна- 
чения атрибута МАМЕ в теге ЕВАМЕ 

митаом/ 1гатез[индекс] 

ми паом/.имя фрейма 
Заметим, что индекс 0 соответствует первому дочернему фрейму в порядке, опре- 
деленном следованием тегов <ЕВАМЕ> в контейнере <ЕКАМЕЗЕТ>. 


Приведенные выше шаблоны ссылок на фреймы из родительского окна исполь- 
зуются как префиксы в полных ссылках к объектам, содержащимся во фреймах. 
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При этом следует помнить, что если нас интересуют объекты документа, загру- 
женного во фрейм, то прежде чем обратиться к ним, следует упомянуть объект 
оситепЕ. Например 

и1паом. Егашез (0) .босимепе.а11.Му 1приё.ха]11е 

и1паом. ЬЕЕТ . Чосищшейе.а11.Му 1приё.уа1ае 
Ссылка из дочернего фрейма непосредственно на родительский производится 
с помощью ключевого слова рагеп(. Если имеется еще один фрейм более высокого 
уровня, то ссылка на него выглядит так: рагепе.рагеп{. Аналогичным образом мож- 
но построить ссылку из дочернего фрейма до прапрадедушки. Чтобы сразу обра- 
титься к родительскому окну, находящемуся на вершине иерархии, можно исполь- 
зовать ключевое слово {ор. 


СОВЕТ а 


При использовании ссылки {ор следует учитывать то обстоятельство, что ваш сайт может 
быть загружен водин из фреймов другого сайта. В этом случае указанный вами объектюр 
окажется совсем другим, и ссылки, построенные сего использованием, не будут правиль- 
но работать. Поэтому рекомендуется использовать рагеп{ для ссылок на вышестоящий 
фрейм (окно). 


Предотвращение использования фреймов 


Ссылки {ор и зе№можно использовать для предотвращения отображения вашего 
сайта внутри фреймов другого сайта. Для этого необходимо, чтобы документ верх- 
него уровня проверял, в какое окно он загружен. Это должно быть самое верхнее 
(ор) или родительское (рагеп) окно. Если это действительно так, ссылка на свой- 
ство {ор совпадает со ссылкой 5еНна текущее окно. При несовпадении этих значе- 
ний документ следует перезагрузить заново, но уже в окно верхнего уровня. Сце- 
нарий, выполняющий эту работу, необходимо разместить в начале документа. Вот 
его код: 


<ЭСЕРТ> 

Ш Сор != зе ® 
тор.1осайоп = 1осаНоп 

</5СВТРТ> 


Проверка загрузки фреймов 


При посещении вашего многофреймового сайта пользователь может сделать за- 
кладку (поместить в папку «Избранное») только на один фрейм, в то время как 
все средства навигации по сайту находятся в другом фрейме. При следующем по- 
сещении в.браузер загрузится усеченный вариант вашего сайта. При этом постра- 
дает как пользователь, так и ваша репутация. 


Следующий простой сценарий проверяет, загружается ли веб-страница в своем 
наборе фреймов, сравнивая ЧВГ-адреса окна {ор и текущего окна. Если они 
совпадают, то необходимо загрузить набор фреймов, определяемый в файле 
Натезее. Ват. 


<$СЁНРТ> 
1Е (бор.1осаб1оп.ВкеЕ == им1паом.1оса®1оп.БгкеЕЁ) 
Еор.1осаЕ1оп.ВкеЕ = "ЁЕгамезее. Вет" 


</5СВТРТ> 
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2.5.3. Плавающие фреймы 


Для вставки одного НТМГ-документа в тело другого средствами браузера пользо- 
вателя, а не сервера, служит контейнерный тег 1ЕВАМЕ>: 
<ЕРВАМЕ $ЗАС = "“адрес_документа"></1РНАМЕ> 


Элемент, задаваемый этим тегом, можно позиционировать с помощью парамет- 
ров таблицы стилей (еег <5ТиЕ> или атрибут 5ГМЕ). Если его положение не указа- 
но явно, то он позиционируется в соответствии с положением <ЕКАМЕ>В НТМГ!- 
коде. Внешне этот элемент выглядит как прямоугольная область (с полосами 
прокрутки или без них), в которой отображается документ из некоторого НТМГ- 
файла. Такие окна иногда называют плавающими фреймами. 


НТМЕ-документы, загружаемые в плавающие фреймы, могут иметь сценарии 
и прочие средства, присущие любому НТМГ-документу. Ниже приведен пример 
загрузки трех различных НТМГ-файлов в плавающие фреймы (рис. 2.16). Это 
НТМЕ-документы из сайта автора (\\м\.адтиа]1.га/-Аипаеу). 

«НТМИ > 


<НЗ>Включение НТМГ-документов на стороне клиента</НЗ> 
<Н4>Использование тега < 'Ига 
Здесь в трех окнах показаны страницы моего сайта<ыг> 


<ШЕКАМЕ 5ВС = " "ехашр!е5 Вт” ></ЛЕКАМЕ> 
<ШЕВАМЕ $ВС = "Назвх.Вт" ></ ШВАМЕ > 
<р> 


<ТЕВАМЕ ВС = "Ч 1врёш" ЗТУТЕ = "роз! Но п: абзо1иЕе; Е ор: 310; м14:500 
е15В(:250" ЗСКОГММб = по" ><ЛЕВАМЕ > 
«НТМЕ > 


Другой пример использования плавающих фреймов рассмотрен в подразделе 4.2.2 
(глава 4). 


Плавающий фрейм ведет себя почти так же, как и обычный фрейм. Если он со- 
здан, то его можно найти в коллекции #гатез. Среди его свойств рассмотрим свой- 
ство а!1гп — выравнивание плавающего фрейма относительно окружающего со- 
держимого документа. Возможные значения: 


. абзбоиот — выравниваетнижнюю границуфреймапоподстрочнойлинии сим- 
волов окружающего текста; 


а6$1119@е — выравнивает середину фрейма по центральной линии между {юр и 
абзбоНотокружающеготекста; 


Базе!пе — выравнивает нижнюю границу фрейма по базовой линии окружаю- 
щего текста; 


. роНош — совпадает с Базе!ше (только в [Е); 
еЁ — выравнивает фрейм по левому краю элемента-контейнера; 


111994!е — выравнивает воображаемую центральную линию окружающего тек- 
ста по воображаемой центральной линии фрейма; 


2 — выравнивает фрейм по правому краю элемента-контейнера; 


{ехНор — выравнивает верхнюю границу фрейма по надстрочной линии сим- 
волов окружающего текста; 


{ор — выравнивает верхнюю границу фрейма по верхней границе окружающе- 
го текста. 
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-3 Включение НТМЕ-документов - Мсгозой ии Ех р Ще] 


Включение НТМТ-документов на стороне клиента 
Использование тэга < Игате> 
Здесь в трех окнах показаны страницы моего сайта 


Вставка На$й-ролика в У\- 
страницу 


Здесь пряведены элементарные 
` примеры НТЫЕ. и 15 сп. Это - азы Так называемый Р!азВ-ролик 
‚ацнамического НИМЕ, Вы можете содержится в ЗБ'ЭД'-файле (те. в 
мк, шх еда вьагоедяг я окне > 


и те\л/для поддержи! начинв»шиж\й?еЬ-дизайнеров. 

ЭЗдейм Шйиайд^ещтиеры иснипьаойанин дишшичесюно НТМЕ. Многие из 
нихв а* Ш<пи|< тшнж'СаяеввеМеБ-ия&кхр" ЛИеф "Бам 
себе я ллекцию. 

ЗМ/ сай<едмп» себе |апгте!» примером. Кенечно, не а смыепе э|аяоиа .1 
Д«я нодражадла. О\едопли вручну»<1.е. »»с помощь» Егоп{Раде ил» 
ИГИД@\еаьи г | так; Е ЗЫ ФДВВМК небольшим, легко просматривапся и. 
«ФОМНтаапАЗЫап«»е\и$!.И1*)гйеиаприи5дв!иьина сайте примеров 
«еш? : ‚ | шмеег»саЙ18, Твкчю, это все раеоае\ 


` Лэшж по са&пЕ?" ‚Ешраре 20038, должна выйти моя кн 
НЫ Усс" ушисанная в соавторстве с сь 
РАОШОЩт Назй, сканированию, осоС 

. №МЕР й другим вопросам. Если вам по 


Рис. 2.16. Документ с тремя документами из внешних файлов, загруженными 
в плавающие фреймы 


2.5.4. Всплывающие окна 


Всплывающее окно не имеет органов управления и располагается над докумен- 
том, в котором оно было создано, в том числе и над диалоговыми окнами. Щелчок 
кнопкой мыши где-либо вне этого окна или вызов другого приложения приводит 
к его закрытию. Оно также не отображается на панели задач УМт4о\з. После со- 
здания всплывающего окна его заполняют содержимым. При этом необходимо 
следить, чтобы содержимое вписывалось в заданные границы окна, поскольку оно 
не имеет полос прокрутки. Такие окна удобно использовать в качестве больших 
всплывающих подсказок для вывода контекстной справочной информации. 
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Всплывающим окнам соответствует объект рорир. Он создается только в сцена- 
рии для браузера 1Е5.5+ с помощью метода уутдо\.стеаеРорир.(). 


Ниже приводится пример типичной последовательности выражений сценария, 
создающего всплывающее окно, задающего его параметры и показывающего его 
на экране (рис. 2.17): 


уаг турорир = мит4о\м. сгеа1еРорирО, // создание всплывающего окна 
уаг рорирВоду = турорир.аоситепт.Бо4у 
/* Параметры окна */ 


рорирВоду . з1у1е.Ъог4аег = "зо! Трх етгееп' // граница окна 
рорирВочу. $1У1е.радата = "5рх" // отступ текста 
рорирВочду. з{у[е.со!ог = "дгееп" // цвет текста в окне 
рорирВочу. $1у[е.Баскдгоипа = "ао" // цвет фона окна 

/* Заполнение содержимым: */ 


рорирВоду.тпегНТМЕ = "<НЗ>Здесь расположен некоторый текст</НЗ 
турорир. Ном (200, 100 у, 70,9 епт. Боду 


// вывод всплывающего окна 
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Рис. 2.17. Всплывающее окно на фоне браузера 


Свойства объекта рорир: 


. доситеш — свойство, имеющее в качестве значения ссылку на документ, со- 
держащийся во всплывающем окне; через него можно задать ряд параметров 
как самого окна, так и его содержимого: 


турорчр. аоситеп .Боау. з1ту!е . Богаег = "зойа 4рх Шаск" // границы окна 
турорир.аоситеге. роду. з4У!е . Баскогоипа = “уеНом" // цвет фона окна 
турорир.аоситеп{.рБоду.1У!е.со!ог = “Бше” // цвет текста в окне 


ы 15Ореп — пока всплывающее окно отображается на экране, это свойство имеет 
значение 1гое, в противном случае — Ёа15е; применяется в выражениях сцена- 
рия, которые выполняются при уже открытом окне. 


Методы объекта рорчр: 


. эпом(еЕ, фор, \1Ч, Бе" |, позиционирование]|) — отображает всплывающее 
окно после создания объекта рорир с помощью метода \лтдо\.стееРорирО 
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и заполнения его содержимым. Если окно исчезло из-за того, что пользова- 
тель щелкнул где-то в поле браузера, то для его повторного открытия следует 
заново выполнить метод зВо\(). Первые четыре параметра метода задают ко- 
ординатное позиционирование и размеры окна. Параметры [ей и {ор опреде- 
ляют координаты верхнего левого угла окна относительно экрана монитора, а 
не окна браузера. Последний необязательный параметр позволяет задать дру- 
гое координатное пространство как ссылку на элемент НТМГ-документа. На- 
пример, указав аоситеп.Бо4у, вы ограничиваете координатное пространство 
окном браузера. 


. 014еО — позволяет скрыть созданное и отображаемое всплывающее окно. 
Заполнение всплывающего окна содержимым производится с помощью свойства 
шреНТМГ, принимающего в качестве значения строку, содержащую теги НТМЕ. 
Более подробно это свойство будет рассмотрено в подразделе 2.6.3. Таким обра- 


зом, в окно можно вставлять не только тексты, но и изображения и другие эле- 
менты. 


Пример 
турорчр. Чаоситепт{. Боду.1ппегНТМЕ = "<1М@ 5АС = ‘русфиге. ]рд'>" 
Более подробно об этом свойстве будет рассказано в следующем разделе. 
Ниже приводится пример НТМГ-документа (рис. °. 18) с двумя кнопками, щел- 
чок на которых вызывает одну и ту же функцию рор(хсом{еп@), открывающую 


всплывающее окно и заполняющую его содержимым, которое задано параметром 
хсощепЕ: 


<НТМЕ> 

<НЗ>Всплывающие окна</НЗ> 

<ВОТТОМ ОГопсИск = "рор('Во первых строках своего письма я рад вам 
сообщить ')">Просто текст</В11ТТОМ> 

<ВВ><ВВ> 

<ВУТТОМ опесИск = "рор('<1М@ $АС = кружка. 911> 

Это кружка с квасом. ') ">Картинка с текстом</ВТТОМ> 

<ЗСКТРТ> 


ЕопсЕ1оп рор(хсопеЕеп®) { 

уах муророр = и1паом.скеаееРорир(); 

уаг рорарВо@у = шурорир .Ааосимепре .Боау 

Г рВоду у1е. бо Г = ("30114 2рх дгееп" 
рорирВоду.з+у1е.раЯЯ114 = "5рх" 
рорирВоду. 6 у1е.со10ог = "Ре" 
рорирВоду.з6у1е.Баскагоипа = "ЕЕЕЕЯО0" 
рориарВоду.1ппегНТМЬ = "‹р>" + хсопбепе + "</р>" 
пурорир.звом (130,90,400,200, досимепе.Ъоау) 
] 

</ЗСВТРТ> 

</нНтмь> 


В рассмотренном выше примере при вызове функции рор() каждый раз создается 
одно и то же всплывающее окно, содержимое которого может изменяться. По- 
скольку позиционирование, размеры и цвета окна не изменяются, то можно на- 
писать более экономный код за счет вынесения выражений его создания и пара- 
метризации за пределы определения функции рор(): 


<НТМЕ> 
<НЗ>Всплывающие окна</НЗ> 
<ВОТТОМ опс11ск = "рор('Во первых строках своего письма я рад вам 
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сообщить ‘) 1ро. ек В 
<ВК><ВВ> 
<ВОТТОМ опе сек = "рор('<1Мб 5ВС = кружка.е 
Это кружка с квасом. ') ">Картинка с текстом 
<СВРТ»> 
уаг шурорир = м1 пом. сткеабеРориро 
уаг рорирВоду = шурорур.9ос! 9 
рВод у рсогдег = "011 2рх дгееп" 


рорирводу. зЕу1е.раб4119 = "5рх" 
рорирВоду . 5туТе, ‹ = "Бе" 
рорирВоду.зЕу1е.Баскагоцпа = "ЕЕЕЕЯО" 


Ропсётот рор(хсопееп®) { 
| оду. 1пп МЕ = + хсопбепе + "</р> 

шурорур.зВои(130,90,400,200 ‚ аосишепЕ .БРоау) 

т 


</ЗСВТРТ> 
НМ 


`РОРИР2 НТМ - МелосоН Нмене Еко > 


пм ви Л мы ль: > 


Файл Чразка вид Изорванное Сшрзи Е | № | 


Восильтв аюиюце окна 


—_— | 


рег >! 


кружка с квасом. 


Ш 


;. ]МОЙ кщ етьюгер 


Рис. 2.18. Пример всплывающего окна с изображением и текстом 


2.6. Динамическое изменение 
элементов документа 


НЕМ] у т, за енный в браузер, можно изменять с помощью сценари- 
ев. Поскольку речь идет не о файле на диске, а о его образе в браузере в оператив- 
ной памяти компьютера, то говорят о динамическом изменении документа. Су- 
ществует три основных способа динамических изменений: 


* спомощью метода уе О; 
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. Путем изменения значений свойств, соответствующих атрибутам НТМГ-те- 
гов и параметрам каскадных таблиц стилей; 


. путем изменения значений свойств шпегГех ощегТеж, шпеНТМГ,още НТМГ, 
которые имеют почти все объекты, заданные с помощью тегов. 


2.6.1. Использование метода мм еб 


Метод \мШеО объекта 4оситепЕ уже неоднократно упоминался в этой книге. Он 
принимает в качестве параметра строку, содержащую НТМГ-код и/или просто 
текст. Выполнение в сценарии выражения 4оситепемйе(сТроКа) приводит к до- 
писыванию в текущий НТМГ-документ содержимого параметра строка и немед- 
ленной его интерпретации браузером. В результате документ и его объектная 
модель обновляются. При этом файл с исходным НТМТ-кодом остается без из- 
менений. Если требуется полностью заменить текущий документ, то сначала при- 
меняют метод очистки документа 4доситепе.4еагО, а затем аоситепмтйе(СТроКа). 
Однако при такой кардинальной трансформации текущего документа следует быть 
осторожным. Наиболее безопасный прием — сначала сгенерировать содержимое 
нового НТМГ-документа с помощью сценария в текущем документе, а затем от- 
править НТМГ-код в новое окно или в другой фрейм многофреймового документа. 


Если быть более точным, то следует отметить, что метод утиеО может принимать 
произвольное количество строковых параметров: 


Чосишепе. мхгт бе СсгрОКа1, [, строка? . . .[, строкам]]) 


Здесь квадратные скобки указывают лишь на необязательность заключенных в них 
параметров. Если указывается несколько параметров, то они разделяются запя- 
тыми. Заметим также, что весь НТМГ-код документа можно записать как одну 
строку. 

Кроме метода мгиеО можно использовать для тех же целей и метод утщешоО, име- 
ющий такой же синтаксис. Его особенность в том, что он добавляет в конце каж- 
дой строки документа невидимый символ перехода на другую строку. 


Методы у\тиеО и \тцешО работают в браузерах 1ЕЗ+ и ММ?2+. 


2.6.2. Изменениезначений атрибутов элементов 


Элементы НТМГ-документа, как известно, задаются тегами, большинство из ко- 
торых имеют атрибуты (параметры). В объектной модели документа тегам эле- 
ментов соответствуют объекты, а атрибутам — свойства этих объектов. В боль- 
шинстве случаев названия свойств объектов совпадают с названиями атрибутов, 
но в отличие от последних записываются в нижнем регистре. Это же относится 
и к параметрам таблиц стилей. Однако это общее правило может иметь исключе- 
ния. Поэтому им нужно пользоваться так: ищите в справочнике свойство, похо- 
жее на атрибут, и обращайте внимание на его написание. Например, тегу графи- 
ческого изображения <МО Ш = "тупие" ЗВС = "рсихге.]рэ"> соответствует объект 
оситепе.а].тупие, а атрибуту ЭКС — свойство 4оситепе.аШтуиие.зтс, значением 
которого является имя (ОЕГ-адрес) файла с изображением. С помощью сцена- 
рия можно присвоить этому свойству новое значение, ив НТМГ-документе про- 
изойдет замена графического элемента. 
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Многие параметры элементов задаются с помощью таблиц стилей, например по- 
средством атрибута МЕ Так, для позиционирования изображения можно ис- 
пользовать следующий НТМГ-код: 

<М@ 1 = "туто" $АС = "русфиге. рад” 

ЭЗМЕ = "роз! от: абзо|и{е; : {ор:20; Це+{: 50: 2-таех:3"> 
Чтобы изменить в сценарии параметры стиля элемента, следует присвоить новые 
значения соответствующим свойствам объекта $6: 


аоситеп{.а!. тута. ${у[е {ор = 30 
аоситеп{. а! |. туйтд. $1у1е.{ор = 100 
аоситеп{.а!!. муйтод. ${1У1е.71паех = -2 


Параметр 2-шдех в таблице стилей, указывающий слой (относительное положе- 
ние выше-ниже) для элемента, в объектной модели представляется свойством 
7паех. 


ВНИМАНИЕ - 


Между обозначениями в НТМЕ и таблицах стилей, содной стороны, и обозначениями соот- 
ветствующих свойств объектов, с другой стороны, много общего, но имеются и различия. 
Поэтому будьте внимательны! 


Многочисленные примеры использования данного способа изменения парамет- 
ров элементов документа рассматриваются в главе 4, в частности в разделе 4.1. 


2.6.3. Изменение элементов 


Наиболее удобный способ динамического изменения элементов НТМГ-документа 
в [Е4- основан на использовании свойств шпегТехь, ощегТех шпеНТМЕ. и още НТМЕ 
В ММ№6б-+ можно использовать только свойство шпегНТМГ. Множество примеров вы 
найдете в главе 4, а здесь мы ограничимся разъяснением общих вопросов. 


Теги элементов документа могут содержать текст и/или другие теги. С помощью 
перечисленных выше свойств можно получить доступ к содержимому элемента. 
Изменяя значения этих свойств, можно изменить сам элемент, частично или пол- 
ностью. Например, можно заменить только надпись на кнопке, а можно превра- 
тить кнопку в изображение или ЕН1азВ-анимацию. 


Значением свойства шпегТех( является все текстовое содержимое, заключенное 
между открывающим и закрывающим тегами элемента. Если в эту строку входят 
НТМГ-теги, то они игнорируются. Обратите внимание, что в значение свойства 
шпегТех{ данные открывающего и закрывающего тегов соответствующего элемен- 
та не входят. Таким образом, шпегТех{ следует понимать как весь внутренний текст, 
содержащийся в контейнере. 


Свойство ощегТех( аналогично свойству шпегТехй, но отличается от него тем, что 
включает в себя и данные, содержащиеся в открывающем и закрывающем тегах 
элемента. Таким ‘образом, ощегТех( следует понимать как весь текст, содержащий- 
ся в контейнере, включая и его внешние теги. 


Рассмотрим в качестве примера следующий фрагмент НТМГ-кода, выводящий 
ссылку, изображение и форматированный текст: 
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<рУ Ш = "му"> 
<А НКЕЕ = ' гахпое.Вт'> 
ПМС ЗВС =‘ "р:сшге. }р2'> Ссылка на раздел <В>Разное</В> 


В этом случае свойства шпегТех( и ощегТехЕ для элемента, заданного контейнер- 
ным тегом <ПТУ>, совпадают: 

оситеп+.а!. ту. тпегТех{ —// значение равно: "Ссылка на раздел 

Разное" 
При присвоении свойствам шпегТех( и ощегТех( новых значений следует иметь 
в виду, что если значение содержит НТМГ-теги, то они не интерпретируются, а вы- 
водятся на экран просто кактекст. Так, для приведенного выше фрагмента НТМТ- 
кода выполнение в сценарии выражения 

доситеп(.аЙ. ту. шоегТехе = "ЗЕШТТОМЯШелкни злесь</ВИТТОМ>" 
не создаст вдокументе кнопку, алишь выведет строку с текстом, указанным спра- 
ва от оператора присвоения. 


Рассмотренные выше свойства шпегТех( и ощегТех( не столь эффективны, как за- 
мечательные свойства шпеНТМЕ, и още НТМЕ. Без них мне было бы просто скучно 
заниматься программированием на НТМЕ и Лауа5сире. 


Свойство шпегНТМГ, для любого элемента имеет в качестве значения строку, со- 
держашую НТМГ-код, заключенный между открывающим и закрывающим тегами 
элемента. Иначе говоря, шпегНТМЕ, содержит внутренний НТМГ-код контейнера 
элемента. Присвоение этому свойству нового значения, содержащего НТМГ-код, 
приводитк интерпретации этого кода. Разумеется, новое значение может и не со- 
держать тегов. 


Свойство ощегНТМЕ, аналогично свойству шпегНТМГ, но отличается тем, что содер- 
жит весь НТМГ-код, включая внешние открывающий и закрывающий теги эле- 
мента. 


Для приведенного выше фрагмента НТМГ-кода имеет место следующее: 


дЧоситеп+ . а1 у ппегНТМЕ —/* значение равно: 
"<А НАЕЕ = 'гагпое.П{т'> 
<М@ УНС = 'рустиге. ]ра'> 
Ссылка на раздел <В>Разное</В></А>" */ 
итепё , а | 1 М /* значение равно: 
"<ПОМ Ш = "ту > 
<А НВЕЕ = ‘гагпое.п{т'> 
<мМ@ $5ВАС = 'русфиге.]рд'> 
Ссылка на раздел <В>Разное</В> 
</А></РТ\У>" */ 
Если в сценарии выполнить, например, выражение: 
ФоситепЕ.аП.ту.шпегНТМГ, = "<ВиТТОМ>Щелкни здесь</В1ЯТОМ>", 
то ссылка, изображение и текст будут заменены кнопкой с надписью Щелкни здесь. 
При этом контейнерный тег <ПМ Ш = "ту"> сохранится. Если же вместо свойства 
шреНТМГ, использовать свойство ощег НТМГ, то кнопка также появится, но уже без 


контейнера <ГМУ Ш = "ту">. 
Заметим, что свойства шпег‚НТМГ, и още НТМЕ, могут применяться и к элементам, 


которые задаются неконтейнерными тегами, например тегом <1МС>. В этом слу- 
чае значения шпегГНТМГ, и ое НТМЕ. всегда совпадают. 
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Ниже приводится код функции ге ргорегИез (х194), которая может использоваться 
в сценарии для получения значений свойств шпеНТМЕ, още НТМГ, шпегТехё и ощег- 
Теж элементов НТМГ-документа. Эта функция принимает в качестве параметра 
значение идентификатора Г) элемента (или значение его атрибута МАМЕ) и выво- 
дит диалоговое окно со значениями перечисленных выше свойств. Вы можете 
применять ее на этапе изучения. 

ЮпсНоп гергорегиез(х1А) { 

уаг х = еуа!| ( "дос "аосатлепеай." + х19) 

а|!ег{(" шпегНТМЕ: " + х. шпегНТМЕ + "\п ощегНТМЕ: " + х.ои_ ЧЕВНТМЕ + 


"\п тшпегТеж{: “ +х.11''':гТех{ + "\п ощегТехЕ: + х. ощ{егТех+{) 
} 


Вот пример использования функции дёргорегие$ (ха): 


<НТМЕ> 
< Ш = "ту"> 
<А НКЕЕ = 'гахпое. В щ'> 


<МС $8С = 'р!с(иге. ]рз' >Ссылка на раздел <В>Разное</В></А> 
<На ТО = "ри! уеё">г1рнВет ‹1>читателям‹ /1></НЗ» 


<ЭСВТРТ> 
| // отображение свойств элемента пу 

| // отображение свойств элемента 
рг1уее 

Еипсё10оп деёргореге1ез ("х1а") { 

// код функции 

} 

</5СВТРТ> 
</НТМГ> 


2.7. Загрузка изображений 


Большинство веб-страниц содержат графические элементы, которые использу- 
ются не только для украшения страниц, но и в качестве информационного напол- 
нения: иллюстрированные каталоги товаров, схемы, чертежи, географические кар- 
ты, фотогалереи и т. п. Если файлы с графикой велики и/или их много, то загрузка 
такой страницы в браузер может потребовать слишком много времени. Для уско- 
рения загрузки используют специальные приемы. Так, нередко сначала загружа- 
ют изображения с низким разрешением из небольших по объему файлов. На их 
основе создаются ссылки на файлы с графикой полноценного разрешения, кото- 
рые загружаются только при щелчке на ссылке. Можно также использовать в теге 
МО> кроме атрибута ЭКС атрибут ГОМЗВС, позволяющий загрузить сначала изоб- 
ражение с низким разрешением, а затем, по мере приема, заменить ее рисунком 
с большим разрешением. Здесь мы рассмотрим способ ускорения загрузки гра- 
фики, предоставляемый Лауазспр:. 


С помощью сценария можно организовать предварительную загрузку изображе- 
ний в кэш-память браузера, не отображая их на экране. Это особенно эффективно 
при начальной загрузке страницы. Пока изображения загружаются в память, ос- 
таваясь невидимыми, пользователь может рассматривать текстовую информацию, 
его не раздражает медленное появление графических элементов. В результате за- 
грузка страницы не вызывает у пользователя отрицательных эмоций. 
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Для предварительной загрузки изображения следует создать его объект в памяти 
браузера. Такой объект несколько отличается от объекта изображения, создавае- 
мого с помощью тега <‹МО>. Как и все объекты, создаваемые сценариями, объект 
изображения не отображается в окне браузера. Однако его наличие в коде доку- 
мента уже обеспечивает загрузку самого изображения при загрузке документа. 
Чтобы создать в памяти объект изображения, необходимо в сценарии выполнить 
следующее выражение: 


туние = пе» 1таёбе(ширина, высота) 
Параметры функции-конструктора объекта определяют размеры изображения 


и должны соответствовать значениям атрибутов \МОТН и НЕСНТ тега <МО>, кото- 
рый используется для отображения предварительно загруженного изображения. 


Для созданного в памяти объекта изображения туйппх можно задать имя или, в об- 
щем случае, ОКГ-адрес графического файла. Это делается с помощью свойства $гс: 
туйто. эгс = "11К1_-адрес_изображения" 


Данное выражение предписывает браузеру загрузить в кэш-память указанное изоб- 
ражение, но не отображать его. После загрузки в кэш-память всех изображений 
и загрузки всего документа можно сделать их видимыми. Для этого нужно свой- 
ству гс элемента МО> присвоить значение этого же свойства объекта изображе- 
ния в кэш-памяти. Например: 


Чосимепе .1тачез[0].зхс = шу1та.згс 


Здесь слева от оператора присвоения указано свойство гс первого в документе 
элемента, соответствующего тегу <МО>, а справа — свойство гс объекта изобра- 
жения в кэш-памяти. 


Теперь рассмотрим в качестве примера НТМГ-документ, в котором отобража- 
ется список названий графических элементов и одно исходное изображение 
(рис. 2.19). Щелчок на элементе списка приводит к отображению соответствую- 
щего изображения. Все графические элементы из этого списка предварительно 
загружаются в кэш-память и поэтому быстро отображаются при выборе из спис- 
ка. Список, как известно, создается с помощью контейнерного тега <ЗЕГЕСТ», со- 
держащего теги <ОРПОМ>. Соответствующий фрагмент НТМТ-кода мы сгенери- 
руем с помощью сценария и запишем в текущий документ. В листинге 2.3 приведен 
соответствующий код. 


Листинг 2.3. Код НТМЕ-документа, в котором отображается список названий графических 
элементов и одно исходное изображение 


<НТМЕ> 

<НЕАО> 

<5СВТРТ» 

уаг Пи?Е|е = пем АггауО // массив имен графических 
// файлов 

112ЕПе[0] = "р!сЁТ.] р" 

112ЕПе |] = "р!сЕЁ2.]ро" 

11Е1е[2] = "р!с(3.]рё" 

11#ЕРИе[3] = "р!сё4.]рэ" 

уаг поМате = пем Аггауо // массив названий картинок 

и1оМате[о] = "Картинка!" 

ипаМате[!] = "Картинка?" 


итоМате[2] = "Картинка3" 
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ип0Мате[3] = "Картинка4" 

/* Создание объектов изображений и загрузка изображений в кали */ 

уаг шеОШ = пем АггауО // массив объектов изображений 
Гог(1 = 0; Е < иаЕЙе. "еп? В; 1- 

шо] = пем [Птазе(150, 10) // создаем объект изображения 
ОЕ]. ге = 1иё РН [1] /* загрузка рисунка в память 


без отображения */ 
] 


ТипсНоп ита$ПомСИ$) { /* отображение изображения 
при выборе из списка 
уаг х = 1151. ор! от$ [11$1. з@естеатаех] . уа\ие /* выбранный номер 


изображения */ 
Фоситеп+{.а!1.1т90О.$гс = е\уа!("!таОЬ] [ "+ х + "].$гс") 
] 


/* Создание списка изображений */ 

уаг с|!Рз{ = "<ЗЕТЕСТопсвапде= ' 1тдзпо\(1411$) ' >" 

Тог(Г = 0; 1<1таЕНе. [епод{й; 1*+) { 

с151+= "<ОРТПОМ МАНОЕ=" + 1 + "" + итоМате[П 

} 

с11$1+=  "</БЕБЕСТ>" 
152) 


доситеп{ . мгле (с1 


/* запись списка изображений 
в документ */ 


</5СВТРТ> 

</НЕАО» 

<! Исходная картинка» 

МС ТО = "Пи" 58ВС = "р1с10.]рз" УШТН=150 НЕГСНТ=100> 
</НТМГ> 


Файл Правка Вид Избранное ‘Сервис 1 
"992993. 5-” А. | 


] Картинка! аи 
| Кэртинка1 


Кэртиика3 
[Картинка^_ _| 


с|Гстоео ^-, Ни. . .4-П..1-: ${® 


Рис. 2.19. При выборе названия изображения из списка соответствующее отображается 
из предварительно загруженного файла 


Обратите внимание, что для преобразования строки в настоящую ссылку на объ- 
ект используется функция еуаЮ. НТМТ-код, определяющий список изображе- 
ний и сгенерированный сценарием, выглядит следующим образом: 
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<ЗЕТЕСТ опспапде = .’ипад$пом/ (111$) °> 
«ОРТЮМ \АГОЕ = бЖартинка! 

ОРПОМ МАШЕ = 1>Картинка2 
<<ОРПОМ МАШУЕ = 2>Картинка3З 

<ОРПОМ УАПОЕ = 3>Картинка4 

/ ЗЕГЕСТ> 


2.8. Управление процессами во времени 


Вы можете периодически, через заданный интервал времени, запускать код (напри- 
мер, функцию) Лауа$спре. При этом создается эффект одновременного (парал- 
лельного) выполнения вычислительных процессов. Например, вы можете запус- 
тить несколько функций, перемещающих на экране различные видимые объекты. 
Эти объекты будут двигаться как бы одновременно. Иногда требуется организо- 
вать временную задержку перед выполнением какой-то функции, чтобы ранее 
начатый процесс успел завершиться. Все это относится к задачам управления 
вычислительными процессами во времени. 


Для организации постоянного периодического (через заданный интервал време- 
ни) выполнения некоторого выражения или функции служит метод $ейщегуаЮ 
объекта уша4о\. Этот метод имеет следующий синтаксис: 

зе п{егуа! (выражение, период [, язык]) 


Первый параметр представляет собой строку, содержащую выражение (в частно- 
сти, вызов функции). Второй параметр — целое число, указывающее временную 
задержку в миллисекундах перед последующими выполнениями выражения, ука- 
занного в первом параметре. Третий, необязательный параметр указывает язык, 
на котором написано выражение; по умолчанию — Лауа5спре. Метод зе Ииегуа1 О 
возвращает некоторое целое число — идентификатор временного интервала, ко- 
торый может быть использован в дальнейшем для прекращения выполнения про- 
цесса, запущенного с помощью данного метода (см. ниже метод «еащегуа!()). 


Пусть, например, требуется, чтобы некоторая функция ту ипсОвыполнялась перио- 
дически через 0,5 с. Тогда в сценарии следует записать следующее выражение: 


зе Нп{фегуа! ("туфипс()”, 500) 


Тот факт, что первый параметр метода зе пщегуа!О является строкой, обусловли- 
вает некоторые особенности передачи параметров периодически вызываемой 
функции. Если периодически вызываемая функция принимает параметры, то мы 
должны сначала сформировать строку, содержащую имя этой функции, круглые 
скобки, значения параметров и запятые между ними, а затем передать ее в каче- 
стве первого параметра методу зе цегуа!О. В следующем примере показано, как 
передать методу зе ш{егуа1О функцию с двумя параметрами, рагап!| и рагап12, зна- 
чения которых определены в другом месте сценария: 

уап хз = "туРипс(" + рагат! + “”,” + рагат2 + 

зе птегуа!| (х${г, 500) 
Выражение, переданное методу зе щегуа!О, будет периодически выполняться 
сколь угодно долго. Если это выражение осуществляет, например, приращение 
координат какого-нибудь видимого элемента документа, то этот элемент будет 
перемещаться в окне браузера. 
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Для остановки запущенного временного процесса служит метод Феайщегуа(М®еН- 
тификатор), который принимает в качестве параметра целочисленный идентифи- 
катор, возвращаемый соответствующим методом зещегуаЮ, например: 

уаг тургос = зе Ипт{егма! ("туРипс (), 100”) 

И (сопНгт("Прервать процесс ?“")) 

с! еаг!п{егуа! (тургос) 

Другие, содержательные примеры использования методов зецегуа!Ю и с[еат 
Пцегуа!Ю приведены в разделах 4.1 и 4.2. 


Чтобы выполнить выражение с некоторой временной задержкой, используется 
метод зе{Гитеой{О. Этот метод объекта \ш@о\ имеет следующий синтаксис: 
зе теоц(выражение, ‚ задержка [, язык]) 


Первый параметр представляет собой строку, содержащую выражение (в частно- 
сти, вызов функции). Второй параметр — целое число, указывающее временную 
задержку в миллисекундах выполнения выражения, указанного в первом пара- 
метре. Третий, необязательный параметр указывает язык, на котором написано 
выражение; по умолчанию — Лауа5стре. Метод зе Типтеоч(() возвращает некото- 
рое целое число — идентификатор временного интервала, который может быть 
использован в дальнейшем для отмены задержки выполнения процесса, запущен- 
ного с помощью данного метода (см. ниже метод с1еагТитеой0). 


Пусть, например, требуется, чтобы некоторая функция тушсО выполнялась спу- 
стя 1 с. Тогда в сценарии следует записать следующее выражение: 


зе !теои+{("туипс()", 1000) 


ВНИМАНИЕ - 


Помните, что это выражение не задерживает выполнение всех последующих выражений 
сценария. Оно лишь задерживает выполнение функции туТипсО. 


Для отмены задержки процесса, запущенного с помощью метода зе Гипеой{(), ис- 
пользуется метод с1еагТ1теои1(идентификатор), который принимает в качестве па- 
раметра целочисленный идентификатор, возвращаемый соответствующим мето- 
дом зе Гилеоце. 


В следующем НТМГ-документе имеются две кнопки. Щелчок на кнопке Пуск о- 
крывает через 5 с новое окно и загружает в него документ туразе.пат. Однако это 
действие можно отменить с помощью кнопки Отмена, если щелкнуть на ней, пока 
окно еще не открыто: 

<НТМЕ> 


«ВОТТОМ 12="5{аг{">Пуск</ВиТТОМ> 
«ВОТТОМ 10="51ор">ОТМеНа</ВУТТОМ> 


<5СВТРТ> 

уаг тургос 

Типо Иоп зфаг+. опс!1СКО { 

тургос = зеЙите’ифит ("м пом. фи ‘тураре, п1т’)", 5000) 


} 


ЕорсЕ1опр вор. опс11сКО { 
с1еагТ1теочЕ (шургос) 

} 

</ЗСВТРТ> 

</НТМГ> 
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Более содержательный пример использования метода зе Гипеой можно найти 
в подразделе4.8.10. 


ВНИМАНИЕ ‹ 


При использовании методов зе{ищегуа! и зе! Гитеои\{() следует иметь в виду, что их вто- 
рые параметры задают лишь приблизительные значения временных задержек. 


2.9. Работа с Сооке 


Для хранения небольших объемов информации на диске компьютера пользовате- 
ля в браузере предусмотрен так называемый механизм соове. Обычно он исполь- 
зуется для хранения имени пользователя и пароля, который вводится в поле фор- 
мы защищенного веб-сайта, атакже информации о предыдущем посещении сайта. 
Например, можно сохранить на диске дату последнего посещения сайта данным 
пользователем. При загрузке сайта эта дата сравнивается с некоторой датой, уста- 
новленной автором сайта в качестве даты обновления. Если вторая (авторская) 
дата более поздняя, чем первая, то на веб-странице появляется соответствующая 
отметка, например текст или изображение с надписью «Ме\» или «Обновлено». 
Разумеется, сравнение дат и вывод на страницу отметки производится с помощью 
сценария. А вот еще один пример: сценарий проверяет, а посетил ли сайт, скажем, 
Вася Пупкин; если это произошло, то на страницу выводится персональное сооб- 
щение. 


По существу, соое — это единственный способ сохранения данных на диске 
пользователя, безопасный для него. Как известно, веб-браузеры препятствуют сво- 
бодному обращению к папкам и файлам на компьютере пользователя (см. гла- 
ву 5). Однако следует помнить, что многие пользователи не любят сооНе-записи 
и всячески их истребляют. 


Записи соове браузер Пиегпе{ Ехрогег сохраняет в отдельных текстовых фай- 
лах, расположенныхв папке \Ип4о\з\Сооез. Имя такого файла образуется на ос- 
нове имени пользователя и домена того сервера, на котором создавался сооНе- 
файл. Месаре Мамеаюг 4 для \УМп4о\з создает просто один файл соове. 6. 
Вообще говоря, структура данных в соое-файлах для различных браузеров не 
столь существенна, поскольку, во-первых, не рекомендуется открывать и изме- 
нять эти файлы в текстовых редакторах, а во-вторых, браузеры ГЕ И М М использу- 
ют одинаковый синтаксис чтения и записи соое-данных, основанный на исполь- 
зовании свойствадоситепе. соое. 


Итак, данные в соое-файлах организованы в виде записей. Каждую такую за- 
пись можно представить себе в виде строки, содержащей следующие элементы: 


. имя записи; 

. содержание записи; 

. срок хранения (годности) записи; 

. домен сервера, который создал запись; 


. сведения о необходимости установки безопасного ВИр-соединения для досту- 
па к записям; 
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. расположение документов, которым разрешен доступ к записям. 


Зависимость записей от домена обеспечивает безопасность хранения так называ- 
емых невосстанавливаемых паролей (пар вида имя_пользователя-пароль), поскольку 
запись, созданную сервером одного домена, не может прочитать сервер с другим 
доменом. 


Срок хранения используется браузером для автоматического удаления просро- 
ченных записей, чтобы предотвратить чрезмерное разрастание объема соое-фай- 
лов. Впрочем, 1Е4+ и ММ4+ ограничили объем соове-файлов 20 записями на каж- 
дый домен. 


Для записи данных в соове-файл с помощью ]ауа$сире используется выражение 
присвоения строки, содержащей соое-данные, свойству доситепе.сооНе. При этом 
важно соблюдать формат строки: 


аоситепе.соок1е = "соо!<1еМате=данные 
[; ехр1кез=СТроКа_Временк_смт] ' 

[; раеъ=путь] 

[; зесиге]” 


Здесь квадратные скобки указывают, что заключенное в них содержимое неявля- 
ется обязательным (может быть опущено). 


Рассмотрим элементы соо е-строки. 


. Им я-данные. Каждая сооюе-запись должна иметь имя и строковое значение, 
которое может быть и пустой строкой. Например, если требуется сохранить 
слово «Вася» в соое-записи с именем Чзег Мате, то соответствующее выра- 
жение ЛауаЗсг!рЕ будет иметь вид: 


Чосцтепе.соок1е = "Озехг_Мате=ВасЕ1" 


При выполнении этого выражения браузер пытается найти сооНе-запись с та- 
ким именем. Если он не находит ее в текущем домене, то создает ее автоматиче- 
ски. Ел запись с таким именем уже существует, то браузер заменяет ее дан- 
ные новыми. Данные в этом элементе сооКе-записи недолжны содержать точек 
с запятыми, запятых и пробелов. Чтобы заменить пробелы соответствующими 
символами (%20),), строка с данными предварительно обрабатывается функци- 
ей езсаре0. 

*  Срокхранения. Дата и время хранения (годности) соое-записи должны быть 
представлены строкой и содержать данные по Гринвичу (СМТ). Например, 
вычислить дату истечения срока хранения записи месяц спустя после теку- 
щей даты можно следующим образом: 

уаг ехраа{е = пем Ба{е() // создаем объект даты 


уаг топ{ ПРгопМом/ = ехраа{е . чей! !те() + (30*24*60*60*1000) 
| М // устанавливаем значение даты 


После этого полученную дату следует привести к строковому формату СМТ: 
доситепЕ.сооК1е = "Озег_ Мате=ВасН; ехр1гез=" + ехраате. {оС МТ5(!т() 
СооНе-запись можно удалить и до истечения заданного срока хранения, уста- 
НОвВиИвВ НОВЫЙ срок, заведомо уже прошедший: 
ехраае=Тви. 01-Гап-70 00:00:01 СИГ 
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Отсутствие срока хранения означает для браузера, что данная сооКме-запись 
является временной и не записывается в файл. 


Об использовании методов объекта даты см. подраздел 1.7.5. 


. ра — сооНе-записи, производимые компьютером пользователя, имеют путь, 
принятый по умолчанию (в текущей папке). Однако можно создать копию 
сооке в другой папке, указав путь к ней в качестве значения этого параметра. 


‚ оташ — для синхронизации соое-данных с определенным документом или 
и группой документов браузер выясняет домен текущего документа и помеща- 
ет в соое-файл записи, соответствующие этому домену. Если пользователю 
требуется просмотреть список всех сооКе-записей, содержащихся в свойстве 
4оситепе.соове, то он должен просмотреть все пары имя-значение, находя- 
щиеся в соове-файле с именем домена текущего документа. Формат пред- 
ставления домена должен охватывать по крайней мере два уровня, напри- 
мер гатЫег.га. 


. зесиге — принимаетлогические значения (гие или #а15е). При создании соое- 
записей на стороне клиента (компьютера пользователя) этот параметр опус- 
кается. 


Теперь займемся чтением и записью данных соове. Данные соое, которые мож- 
но получить с помощью сценария на Лауа$ сре, представляют собой единствен- 
ную строку — значение свойства 4оситепЕ. сооК!е. Выбор значений отдельных эле- 
ментов (параметров) соое производится на основе анализа содержимого этой 
строки методами объекта ше (см. подраздел 1.7.1). Кроме того, если две и более 
сооКе-записи (до 20) соответствуют одному и тому же домену, то в Лауазсире они 
все равно представляются одной строкой и разграничиваются точкой с запятой и 
пробелом. 


Рассмотрим функцию геа4аСоок1е(пате), читающую соое-данные, соответствую- 
щие имени записи пате, которое передается этой функции в качестве параметра: 
ТипсНоп геадСооКе(пате) { // чтение сооке-данных записи 


\уаг хпате = пате +" 
уаг Хеп = хпате.1еп 


уаг Ааеп = аоситеп+{.соок!е. 1епатй 

уаг! = О 

УуВПе(1 < Сеп) { 

уаг } = Е + хеп 

И! (аоситетЕ. соокте. 5 и6 511 п2(1, ]) == хпаште) 
теигп зе СоокеУа1(]) 

1 = доситепе .сооке. ша4ехО[!(" ",!) +1 

# (@ == 0) Бгеак 

1 


геаги пи 

1 
Функция геа4СооК1е(пате) возвращает значение сооНе-записи с именем пате или 
по|, если такая запись не найдена. В теле этой функции использована еще одна, 
вспомогательная функция 2еСоове\Уа[(0), возвращающая декодированное значе- 
ние соое-данных. Декодирование производится с помощью встроенной функ- 
ции ипезсареО. Дело в том, что соое-запись должна представлять собой коди- 
рованную строку, полученную путем обработки встроенной функцией е5сареО, 
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чтобы, в частности, заменить пробелы специальными символами (%20). Код этой 
функции приведен ниже: 


ТипсНоп деСооке\а! (р /* вспомогательная функция, 
вызываемая из теа@СоокеО */ 

уаг епази = доситегт. сооке. тадехОЕ (7 п) 

й (епази == -1) 


епаз\" = аоситет .сооке 1епо{И 
геигп ипезсаре(Чоситепт1.сооке.зиб${итод(п, епаз\г)) 


Теперь рассмотрим функцию жйеСоовеО, позволяющую создать или обновить 
соове-запись: 


ТипсНоп м/и {еСооке(пате, уаше, ехриез, рат, дотат, зесиге) { 
/* запись сооКе */ 
аоситеп{.сооке = 
пате + "=" + езсаре(уаше) + 
((ехрие$) ? "; ехриез=" + ехрие$4о@НТЗЕ гп): "") + 


((раёп) ? "; раш=” + рай : "") + 
(Чотат) ?’". аотз4и”"" + дотам : "*) + 
((зесыге) ? “5»’зесиге” : "") 


} 


Эта функция принимает следующие параметры: 
. паше — строка, содержащая имя сооКе-записи (обязательный параметр); 


. уаше — строка, содержащая значение соове (обязательный параметр); 
. схриез — объект даты (Рае), содержащий срок хранения сооНе-записи; если 
отсутствует, то после завершения работы браузера сооКе-запись удаляется; 


. ра — строка, содержащая путь соо е-записи; если не указан, то использует- 
ся путь вызванного документа; 


‚ Чоташ — строка, содержащая домен нужной сооКе-записи; если не указан, то 
используется домен вызванного документа; 


. зесиге — логическое значение (гие или #15е), определяющее необходимость 
использования безопасного НТТР-соединения. 


Обратите внимание, что в теле функции у\гиеСоок1еО происходит кодирование 
значения параметра уаше с помощью встроенной функции е5саре0. 


Для удаления сооКе-записи можно использовать следующую функцию: 


ТипсНоп аевеСооК!е(пате, ра1й, дотат) { 
/* удаление сооКе-записи */ 
! (геадСооке(пате)) { 
доситеге .сооке = 


пате + "=" + 
((раёй) ? "; разй=” + рай : "") + 
((Чоташт) ? “"; дотат="+дотан : "") + 


; ехрне$=Тви, 01-ап-70 00:00:01 СМТ" 


Эта функция устанавливает дату срока хранения сооКе-записи так, что запись 
будет удалена. Параметр ра должен иметь такое же значение, которое использо- 
валось при создании сооКе-записи, или иметь пустое значение (пи), если при 
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создании записи он не был определен. Таким же образом задается значение пара- 
метра дЧотат. 


Советую вам поэкспериментировать с чтением, созданием и удалением соове- 
записей (листинг 2.4). При этом следует иметь в виду, что созданные или изме- 
ненные соое-записи будут записаны на диск только после закрытия браузера. 
До этого записи существуют лишь в кэше (оперативной памяти). С другой сторо- 
ны, сооКе-записи загружаются в оперативную память и становятся доступны как 
значение свойства доситепё.сооюе только при запуске браузера. 


Листинг 2.4. НТМЕ-код для эксперимента со сценарием, записывающим и читающим сооКе-запись 


<НТМ1 > 
<5СВТРТ> 
КпсНоп  геадСоове(пате) { // чтение сооюе-данных записи 
// код 
Гипс Ноп зе СоощеУа1 (п) { /* вспомогательная функция, 
вызываемая из геааСоомеО */ 
// код 


1 
ГапсНоп угиеСоое(пате. уае, ехр1гез, ра, Чоташ, зесиге) { /* 


запись сооке */ 


а // код 
} 


/ * Срок хранения - 1 год от текущей даты: */ 
уаг 9 = пех Рае () 

уаг 42 = 4.де{теО + (365*24*60*60*1000) 
а1.5е1Тте(а2) 

/* Запись и чтение сооме: */ 


"т 


мтЦеСооК!е( "тугесога"," Привет " , Ч!) 

а!ег{ (геа9Соок!е("тугесога") ) 

</УСВТРТ> 

</НТМЬ> 
Вы можете организовать для зарегистрированных посетителей вашего сайта до- 
ступ к специальным страницам, предназначенным только для них. В этом случае 
сценарий проверяет наличие в сооке-файле записи с некоторым фиксированным 
именем (например, тузресгесога)ичитаетеезначение, содержащее пароль. Если 
пароль правильный, то в документ загружается ссылка на защищенный паролем 
документ либо сам этот документ. Если такой соое-записи не нашлось либо па- 
роль в этой записи не верен, то в документ загружается поле ввода пароля. Если 
введенный пользователем пароль верен, то сценарий создает соое-запись с име- 
нем тузресгесог4 и записывает в нее пароль. После этого в текущий документ 
загружается либо ссылка, либо сам защищенный документ. При следующем по- 
сещении этого сайта пользователю не придется снова вводить пароль, поскольку 
сценарий просто считает его из сооке-записи. Это, конечно, справедливо до тех 
пор, пока сооК1е-запись с паролем сохраняется на диске компьютера пользовате- 
ля. Поэтому ее можно обновлять с помощью сценария, указывая новое значение 
срока хранения, вычисленное на основе текущей даты (например, текущая дата 
плюс месяц). 
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ВНИМАНИЕ - 
Значение пароля не должно фигурировать в сценарии в явном виде, а записывать пароль 
в сооКе-файл желательно в зашифрованном виде. 


Несложный алгоритм преобразования пароля вы можетепридумать самостоятель- 
но. Другой вариант защиты страниц сайта с помощью пароля рассмотрен в гла- 
ве 4, в подразделе 4.8.10. 


Для закрепления полученных навыков рекомендую вам написать сценарий, ис- 
пользующий сооК1е-запись для проверки, была ли обновлена веб-страница с мо- 
мента последнего ее посещения пользователем. Если вы решитесь на это, то сове- 
тую еще раз обратиться к свойствам объекта Рае (см. подраздел 1.7.5). 


Глава 3. Объектная модель 
браузера и документа 


В предыдущей главе вы уже познакомились с понятием и основными элементами 
объектной модели браузера и документа (рис. 3.1). Материал этой главы носит 
обзорно-справочный характер. Он понадобится вам при чтении главы 4, посвя- 
щенной примерам сценариев. Заметим, что здесь рассматриваются далеко не все 
объекты, алишь основные. 


3.1. Объект мт@до\м 


Объект \ш4о\ содержит коллекцию Натез всех фреймов, заданных в НТМГ-до- 
кументе с помощью контейнерного тега <ЕВАМЕЗЕГ>. Объект \шдо\ имеет свой- 
ства, методы, события, а также дочерние объекты. Приведем их полные перечни 
и рассмотрим, с разной степенью подробности, только наиболее важные с прак- 
тической точки зрения. 


3.1.1. Свойства млпдо\м 


*  рагеп — возвращает родительское для текущего окно; 

. 56 возвращает ссылку на текущее окно; 

. (ор — возвращает ссылку на главное окно; 

. паште — название окна; 

. орепег— окно, создаваемое текущим; 

. С10зе4 — сообщает, если окно закрыто; 

* (аз — текст, показываемый в строке состояния браузера; 

. деаш6 м5 — текст по умолчанию строки состояния браузера; 


. гебитУаше — позволяет определить возвращенное значение для события или 
диалогового окна; 


сПеп{ — ссылка, которая возвращает объект навигатора браузеру; 
. оситепЕ — ссылка только для чтения на объект окнадоси шепб 
. сусп — ссылка только для чтения на глобальный объект еуепб; 


. 11$0гу — ссылка только для чтения на объект окна 11${огу; 
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иупипеТурез\ 


ПЕ 3 Кэждый фрейм в В: 
`Чгаплез коллекции Натез (ити 
р » является окном 


(улпаом/) 


Зоситеги доситеги 


1 


ох 
Носитепе (=) 


29 авы еысо, 


Рис. 3.1. Объектная модель 


. 1осаНоп — ссылка только для чтения на объект окна Г.оса оп; 
. пауза‘ог — ссылка только для чтения на объект окна пау!зафог; 
.  зсгееп — ссылка только для чтения на глобальный объект зсгееп. 


Свойство рагеп{ позволяет обратиться к объекту, находящемуся в иерархии на 
одну ступень выше — например, к окну, содержащему коллекцию фреймов, в ко- 
торой находится наш фрейм. Для перемещения на две ступени вверх мы должны 
использоватьрагеп(.рагепит.д.: 
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рагепе ‚ м1паом. Етатез (0) 
ракете .рагепЕ .млп@аом. ЕЁгатез (0) 


Чтобы обратиться к самому главному окну, то есть к окну браузера, следует ис- 


пользовать свойство фор. Однако {ор не может обращаться к главному фрейму ва- 
шей системы разбиения на фреймы. 


Свойство пате соответствует имени фрейма, которое мы задаем в теге <ЕКАМЕЗЕГ>. 
Свойство ${ал5 полезно использовать для вывода сообщений во время работы 
сценария, например при отладке: 


мтаом.51а1из="Сейчас работает сценарий" 


3.1.2. Методы мипЧом/ 


орепО — открывает новое окно браузера; 


с105е() — закрывает текущее окно браузера; 


звомНефрО — показывает окно подсказки как диалоговое; 
. зпо\уМо@а1.1а1о5() — показывает новое окно как диалоговое (модальное); 


. мепО — показывает окно предупреждения с сообщением и кнопкой ОК; 


рготр О — показывает окно приглашения с сообщением, текстовым полем 
и кнопками ОК и Сапсе! (Отмена); 


сопйгтО— показывает окно подтверждения с сообщением и кнопками ОК и Сапсе] 
(Отмена); 

.  памраеО — загружает другую страницу с указанным адресом; 

. ЫигО — убирает фокус с текущей страницы; соответствующее событие — оп шг; 


Юси$ () — устанавливает страницу в фокус; соответствующее событие — опЮсиз; 


зстоПО — разворачивает окно на заданные ширину и высоту; 


. зеИщегуаЮ — указывает процедуре выполняться периодически через задан- 
ное количество миллисекунд; 

. зеТипеошО — запускает программу через заданное количество миллисекунд 
после загрузки страницы; 

. СеагииегуаЮ — обнуляет таймер, заданный методомзейнцетуа!О; 

. сеагТииеоО — обнуляет таймер, заданный методомзеТипеоц((); 


* схесбспр{О — выполняет код сценария; по умолчанию 5с1р.. 


3.1.3. События мп ом 


опЬшг — выход окна из фокуса; 


опосиз$ — окно становится активным; 


оппе!р — нажатие пользователем клавиши Е1; 


0пге517е — изменение пользователем размеров окна; 


оп$сго| — прокрутка окна пользователем; 


. опеггог — ошибка при передаче; 
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* опбеогеип1оа4 — передвыгрузкой страницы, чтопозволяетсохранитьданные; 
. ошоа4 — страница полностью загружена; 
. опашоаа — непосредственно перед выгрузкой страницы. 


Три из перечисленных выше событий происходят в результате действий пользо- 
вателя. Если открыто несколько окон браузера, пользователь может переключаться 
между ними, переводя фокус с одного окна на другое. Эти действия инициируют 
события оп ги опЮси$. Заметим, что эти же события можно вызвать программ- 
ным способом, используя методы Баг и Юсиз. Если происходит ошибка при за- 
грузке страницы или ее элемента, то инициируется событие опеггог. Мы можем 
использовать это событие в программе, чтобы, например, попытаться еше раз за- 
грузить страницу или как-то изменить дальнейшие действия. 


Пример 


<ЗСНРТ> 
ГапсНоп \14до\.отегг 
а1егЕ ("Произошла ошибка! Попробуйте еще раз") 


</ЗСВТРТ> 


Событие опоа4 происходит, когда страница полностью загружена в окно; событие 
опбеюгипюа9—переЙТеМКаКСТраННпапоКННеТОКНо:событаеопипоа9—когда стра- 
ница выгружена, перед загрузкой новой страницы или перед закрытием браузера. 
Пример 


<ЗСЫРТ> 
КпсНоп ушдо\.опищоа4() { 
аег{("Страница выгружается!") 


} 
</ЗСВТРТ> 


Объект ш4о\ имеет несколько дочерних объектов, которые доступны с его по- 
мощью: доситеп, В15югу, памеатог, |осаЧоп, еуепё и зсгееп. 


3.2. Объект доситепЕ 


Объект Чоситеп{ является центральным в иерархической объектной модели 
и представляет всю информацию о НТМГ-документе с помощью коллекций 
и свойств. Он также предоставляет множество методов и событий для работы с до- 
кументами. Поскольку мы уже рассматривали некоторые основные приемы обра- 
шения с этим объектом, то здесь ограничимся лишь справочными сведениями. 


3.2.1. Свойства доситет 


Свойство Атрибут Назначение 

ас{меЕетепт Идентифицирует активный элемент 

айпкСо!ог АНМК Цвет активных ссылок на странице 

БаСоог ВОСОШОВ Определяет цвет фона элемента 

Боду Ссылка только для чтения на неявный основной 


_объект документа, определенный втеге<ВОБ\> 
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Свойство Атрибут Назначение 


соове Строка сооке-записи. Присвоение нового значения 
этому свойству приводит к записи сооке на диск 
после закрытия браузера 


Чотат Устанавливает или возвращает домен документа 
для его защиты или идентификации 

9Соог ТЕХТ Устанавливает цвет текста переднего плана 

1а51{Моамеч Дата последнего изменения страницы, доступна 
как строка 

ПакСо!ог ИМК Цвет еще не посещенных гиперссылок на странице 

юсайоп Полный ЧУВЁ документа 

рагеп АИпаом Возвращает родительское окно для документа 

геаау{ае Определяет текущее состояние загружаемого 
объекта 

гетегег АЕ страницы, которая вызвала текущую 

заесНоп Ссылка только для чтения на дочерний 


для аоситеп{ объект з@есйоп 


ие ИТЬЕ Определяет справочную информацию для 
элемента, используемую при загрузке или во 
всплывающей подсказке 


ий ЦВЕ УАЁ-адрес документа клиента или в теге <МЕТА> 


мУкСо!ог _ УМК Цвет посещенных ссылок на странице 


3.2.2. Коллекции аоситет 


. а] — коллекция всех тегов и элементов в основной части документа; 


. апсПог$ — коллекция всех «якорей» (закладок) в документе; 


арр!е{5 — коллекция всех объектов в документе, включая встроенные элемен- 
ты управления, графические элементы, апплеты, внедренные и другие объекты; 


° ©16е4$ — коллекция всех внедренных объектов в документе; 

. Гогтз —коллейция всех форм на странице; 

. Каштез — коллекция всех фреймов, определенных в тае<ЕВАМЕЗЕТ>; 

. Шасез — коллекция всех графических элементов (изображений) на странице; 
. ШК$ — коллекция всех ссылок и блоков <АКЕА> на странице; 

* р№аят5$ — еще одно название для коллекции внедренных объектов документа; 
* 5спр6 — коллекция всех разделов <ЗСВРТ> на странице; 


.  5{УезНее{5 — коллекция всех конкретных свойств стиля, определенных в доку- 
менте. 


3.2.3. Методы аоситеге 


. сеаг — очищает выделенный участок; 


. с105е — закрывает текущее окно браузера; 
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стеае Е1етеп" — создает экземпляр элемента для выделенного тега; 
@ететЕготРош" — возвращает элемент с заданными координатами; 
ехесСогптап4 — выполняет команду (операцию) над выделением или областью; 


ореп — открывает документ как поток для обработки результатов применения 
методов \тЦе и утцет; 


аиеу' туСоплтапаЕпа е — сообщает, доступна ли данная команда; 


ацегуСоттапАшащегт — сообщает, если данная команда имеет неопределен- 
ный статус; 


ацегуСоттапа {а{е — возвращает текущее состояние команды; 
ачегуСоттапа$ ирроце — сообщает, поддерживается ли данная команда; 
ачегуСоттапаТех{ — возвращает строку, с которой работает команда; 


ачегу Соттапа\Уаше — возвращает значение команды, определенное для доку- 
мента или объекта Тех{Капзе; 


утце — записывает текст и код НТМЕ в документ, находящийся в указанном 
окне; 


утцеш — записывает текст и код НТМГ, заканчивающийся возвратом каретки. 


3.2.4. События аоситеге 


опайегараае — возникает при окончании передачи данных; 
опреюгеир4ае — возникает перед выгрузкой страницы; 

опсИск — происходит при щелчке левой кнопкой мыши; 

са6сИЙск — происходит при двойном щелчке левой кнопкой мыши; 
опагае5аг — происходит, когда пользователь начинает перетаскивание; 
опеггог — ошибка при передаче; 

опре!р — нажатие пользователем клавиши Е1; 

опкеудомп — возникает при нажатии клавиши; 


опкеургез$ — возникает при нажатии клавиши и продолжается при удержании 
клавиши в нажатом состоянии; 


опКеуир — возникает, когда пользователь отпускает клавишу; 
оп[оа4 — возникает при полной загрузке документа; 
оптоизедомп — происходит при нажатии кнопки мыши; 


отоц5етоуе — происходит при перемещении указателя мыши; , 


@тоиц5еоц( — происходит, когда указатель мыши выходит за границы эле- 
мента; 

оптои5еоует — происходит, когда указатель мыши входит на элемент; 
опточцзеир — происходит, когда пользователь отпускает кнопку мыши; 


опгеаду${а(есвапзе — возникает при изменении свойства геадуз (аще; 


опзеес$аг — происходит, когда пользователь в первый раз запускает выде- 
ленную часть документа. 
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3.3. Объект осаНоп 


Объект 1осайоп содержит информацию об ОЕГ-адресе (и его компонентах) теку- 
щей страницы, а также методы, позволяющие обновлять страницы. 


3.3.1. Свойства юсаНоп 


. ПтгеР- полный ОВГ-адрес в виде строки; 


. ПазЬ — строка, следующая в ОВГ за символом#, с помощью которого указыва- 
ется, к какому анкеру следует переместиться при загрузке документа.; 


. [05 — часть ЧВГ<«хосг.порт»; значение порта содержится лишь тогда, когда 
оно явно было указано в ОЕГ-адресе; 
. розпаште — часть ОВГ «хост»; 
. ра паше — путь к объекту или файлу, находящийся после третьего«/»; 
. рой — номер порта ЧВГ; 
* рго{осо| — начальная часть, определяющая протокол, за которой следует двое- 
точие, например «В@р:»; 
. зеагсП — строка запроса или данные ОВГ после знака«?». 
Например, если вы загрузили страницу с адресом ВИр://\м\\.рЦег.сот, то значе- 
нием 1осаЧоп.Втге{ будет эта строка. 
Присваивая свойству ПгеР новое значение, мы можем изменять показываемую 
в браузере страницу, например: 


и1паом.1осае1оп.ргеЕ = "РеЕфр: / /ммм. катЪ1ехк.га" 


3.3.2. Методы юсаНоп 


. 255101() — загружает другую страницу; этот метод эквивалентен изменению 
свойства \ушао\.1осаНоп.ВгеЁ 


. т@оа@О — обновляет текущую страницу; 


. терасеО — загружает страницу с указанным в параметре ОВГ-адресом и заме- 
няет ОВГ-адрес текущей страницы (1осайоп.Вге{). 


Некоторые веб-сайты могут содержать страницы, которые не предназначены для 
посещения пользователем и занесения их в список посещенных страниц. Напри- 
мер, перемещение по сайту может привести пользователя на некоторые промежу- 
точные страницы, которые ему больше не понадобятся. При этом желательно, что- 
бы пользователь не мог вернуться к ним снова с помощью кнопки Назад (Васк). 
В этом случае используют метод 1осайоп.гер!асе(ОВГ-аЙрес) для перехода к ука- 
занной странице без занесения его в список документов, переход к которым осу- 
ществляется щелчком на этой кнопке. 


3.4. Объект Могу 


Объект №1$%0огу содержит информацию об адресах страниц, которые браузер посе- 
тил во время текущего сеанса. Мы можем передвигаться по этому списку с по- 
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мощью сценария и загружать соответствующие страницы. Объект В1${югу имеет 
только одно свойство и три метода. 


3.4.1. Свойство Иогу 


1еп2 1 — количество элементов в списке посещенных страниц. 


Это свойство используется в сценарии для контроля того, чтобы не выйти за пре- 
делы списка. 


3.4.2. Методы Могу 


. БаскО — загружает предыдущую страницу из списка; 
. ЮГУжаО — загружает следующую страницу из списка; 


. д0() — загружает страницу с относительным номером п из списка (от 0 до 
Ы1$огу [еп2 1-1) или с указанным ОЕГ-адресом. 


В следующем примере загружается первая страница, а затем загружается пятая 
страница, причем предварительно проверяется, существует ли она в списке уже 
посещенных страниц: 


мипаоми. В! ${огу.д90 (1) 
МН (мпаом. югу. 1епа1й>4) 
мипо\ми. ВР $т0гу.40(5) 


Очевидно, метод №1$югу.0(-1) эквивалентен В1$юогу.БасКО, а метод \лпао\.$юту. 
20([Г) эквивалентен методу №5югуКюг\агаО. 


3.5. Объект пагаог 


Объект пау1еайюог содержит информацию о производителе браузера, его версии 
и возможностях. 


3.5.1. Свойства памдафог 


. аррСо4еМаште — название кода браузера; например"Мо7Ша"; 
. аррМаше — название браузера; например "Мсгозой Пиегпе{ Ехрюгег"; 


.  аррУегзюп — версия браузера; например "4.0 (сотраНЫе; М$ТЕ 6.0; УМпдомз 98; 
Уп 9х4.90)"; 


. соомеЕпаед 


— определяет возможность использования в браузере сооез$ со 
стороны клиента; логическое значение; 


. И‘зегАсет — название браузера, посылаемое с помощьюйр-протокола; напри- 
мер "Мо7Йа/4.0 (сотраНЫе; МЯЕ 6.0; УМпаомз 98; Уп 9х 4.90)". 


3.5.2. Коллекции памдаюг 


. шииеТурез — коллекция всех типов документов и файлов, поддерживаемых 
браузером; 


. [№25 — коллекция всех внедряемых объектов на странице. 
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3.5.3. Методы памдаюг 


* аш(Епа Ме — возвращает значение #15е, включен для совместимости с Месаре 


Мамеабог; 


* ]ауаЕпа !е4 — сообщает, возможен ли в данном браузере запуск кода сценария 


на языке ]ЛауаЗсп ре; логическое значение. 


3.6. Объектеуег{ 


Объект сует позволяет получить информацию о каком-либо событии, происхо- 
дящем в браузере. Эта информация содержится в следующих свойствах: 


а(Кеу — возвращает состояние клавиши АЙ, когда происходит событие; 
Байоп — кнопка мыши, вызывающая событие; 


сапсе1 Вибе — устанавливается для запрета прохождения заданного события 
вверх по объектной иерархии; 


сПеп(хХ — возвращает координату х элемента, исключая обрамление, отступы, 
полосы прокрутки ит. д.; 


сПепуУ — возвращает координату у элемента, исключая обрамление, отступы, 
полосы прокрутки ит. д.; 


СШКеу — состояние клавиши СИ при появлении события; 


Нот Еетеп{ — возвращает элемент, с которого ушел курсор мыши, для собы- 
тий оптоизеоуег и оптоизеоц"; 


КеуСо4е — код АЗСП нажатой клавиши; есть возможность изменять значение, 
передаваемое объекту; 


ойех — возвращает координату х указателя мыши в пикселах относительно 
содержащего его элемента при возникновении события; 


обе’ — возвращает координату у указателя мыши в пикселах относительно 
содержащего его элемента при возникновении события; 


теазоп — указывает, что перемещение данных прошло успешно или из-за чего 
онопрекратилось; 


гегагпУае — определяет возвращаемое значение для события; 


зстеепХ — возвращает горизонтальную координату указателя мыши относитель- 
но экрана, когда происходит событие; 


зстееп/ — возвращает вертикальную координату указателя мыши относитель- 
но экрана, когда происходит событие; 


$ЗЫАКеу — определяет состояние клавиши ЭША при возникновении события; 
зтсЕ1етеп{ — возвращает элемент, с которого началось прохождение события; 
зтсЕЩег — возвращает фильтр, создавший событиеопйКегсвапее; 


{оЕ!етеп{ — возвращает элемент, на который наезжает курсор мыши, при по- 
явлении события опточзеоуег или оптоизеош; 


Туре — возвращает название события как строку, без приставки оп; 
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. х — возвращает координатух указателя мыши соответственно либо к позицио- 
нированному родительскому элементу, либо к окну; 


. у — возвращает координату у указателя мыши соответственно либо к позицио- 
нированному родительскому элементу, либо к окну. 


Свойства объекта еуеп{ устанавливаются в момент прохождения события и боль- 
шинство из них доступны только для чтения (их нельзя изменить). Однако есть 
два изменяемых свойства: КеуСо4де и гейит’ Уаше. Мы уже рассматривали примене- 
ние объекта еуеп+. 


3.7. Объект зсгееп 


Объект зстееп содержит информацию о возможностях экрана пользователя и мо- 
жет применяться, например, для определения размеров создаваемых окон и вы- 
бора разрешения передаваемой графики (нет смысла загружать 32-битное изоб- 
ражение, если монитор и видеокарта пользователя поддерживают только 256 цветов). 
Объект зсгееп имеет следующие свойства: 


* У\14Ш — возвращает ширину экрана пользователя (в пикселах); 
. рее — возвращает высоту экрана пользователя (в пикселах); 


. рийегОерй — определяет, используется ли буфер для хранения «второго эк- 
рана»; 


* со1огОер — возвращает информацию, позволяющую решить, как использовать 
цвета на экране; количество бит на пиксел устройства или видеобуфера пользо- 
вателя; 


.  прдаешегуа! — возвращает или задает интервал времени между обновления- 
ми экрана пользователя. 


3.7.1. Объект ТежВапде 


Объект Тех{Вапзе (текстовая область) отображает разделы потока текста, форми- 
рующего НТМГ-документ. Может использоваться для управления текстом вну- 
три страницы. 


3.7.2. Свойства ТежВапде 


* ШоТехЕ — возвращает содержимое Тех{Вапзе как текст и код НТМГ; 
* {ехЕ — простой текст, находящийся внутри элемента Тех{Капее илитега<ОРПОМ»>. 


3.7.3. Методы ТежВапде 


. соПарзе- — стягивает текстовую область в точку в начале или конце текущей 
области; 
.  сошрагеЕп@Рот65 — сравнивает две текстовые области и возвращает значение, 


показывающее результат; 
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ЧирНсае — возвращает копию области Тех{Капее; 
ехесСоштапа — выполняет команду (операцию) над выделением или областью; 


ехрапа — расширяет текстовую область, добавляя туда новый знак, слово, пред- 
ложение, или указывает, какие неполные блоки полностью в ней содержатся; 


ВоЧТех — определяет текстовую область, содержащую только искомый текст; 


е{Вооктагк — возвращает значение, позволяющее в дальнейшем идентифици- 
ровать данную позицию в документе; 


шКапее — определяет, находится ли заданная текстовая область внутри теку- 
щей; 


153Еаца| — определяет, равны ли заданная и текущая текстовые области; 


тшоуе — изменяет начальную и конечную точки текстовой области для включе- 
ния в нее различного текста; 


шоуеЕп — заставляет текстовую область сжаться или расшириться до задан- 
ной конечной точки; 


шоуе аи — заставляет текстовую область сжаться или расшириться до задан- 
ной начальной точки; 


поуеТоВооктаж — передвигает границы текстовой области для включения дру- 
гой, определенной ранее с помощью зе ВооктагК; 


шоуеТоЕтетеп"Тех( — передвигает границы текстовой области для включения 
текста в заданном элементе; 


шоуеТоРошЕ — передвигает границы текстовой области и сжимает ее вокруг 
выбранной точки; 


рагеп Е1етеп{ — возвращает элемент, родительский по отношению ко всему, что 
входит в текстовую область; 


раеНТМГ, —вставляет текст и/или НТМГ-код в текущую текстовую область; 
ачегуСоттапаЕпа е — сообщает, доступна ли данная команда; 


ааегуСоттапашаеетт — сообщает, если данная команда имеет неопределен- 
ный статус; 


ацегуСоттапа {а{е — возвращает текущее состояние команды; 
ачегуСоттапа$ иррощеа — сообщает, поддерживается ли данная команда; 
ачегуСоттапаТех{ — возвращаетстроку, с которой работает команда; 


аиегуСоттапаУаюе — возвращает значение команды, определенное для доку- 
мента или объектаТех( Капее; 


эстоШию\Ме\у — переносит текушую текстовую область в видимую часть окна 
браузера; 

з@ес{ — делает активный подсвеченный участок выделения на странице рав- 
ным текущей текстовой области; 


зе&ЕпаРош"— переносит начальную или конечную точку текущей текстовой 
области в начало или конец заданной области. 


Глава 4. Примеры сценариев 


В этой главе мы рассмотрим примеры решения некоторых задач. Не все из них 
одинаково часто возникают при разработке приложений и, в частности, веб-стра- 
ниц, однако их изучение позволит получить практические навыки программиро- 
вания. Кроме того, некоторые примеры могут вдохновить вас на разработку соб- 
ственных проектов. 


4.1. Простые визуальные эффекты 
4.1.1. Смена изображений 


В веб-дизайне часто возникает необходимость заменить одно изображение на дру- 
гое. Новички нередко начинают свое творчество именно с этой операции. Поэто- 
му рассмотрим данную задачу подробнее. 


Суть смены изображений заключается в том, чтобы с помощью сценария изме- 
нить значение атрибута ЭВС тега <МО>. Напомним, что атрибут ЗВС имеет в каче- 
стве значения строку, указвающую месторасположение графического файла. Если 
элемент<1 МСО>, задающий изображение, содержится в НТМГ-документе, тов объ- 
ектной модели имеется объект этого элемента со свойством згс. Значение этого 
свойства можно изменить в сценарии. При этом в окно браузера загружается со- 
ответствующий графический файл, если, разумеется, он будет найден. В следую- 
щем примере щелчок на изображении из файла р!сИ.2И заменяет его изображе- 
нием из файла рс@.5[. Поскольку сценарий очень небольшой, он записан в строке, 
которая присваивается атрибуту опсЙсКк тега <МО>. 


<НТМЕ> 

<Мо Ш = "пушие" 98С = 'р1с(|. 81 Ё 

опсск = "Чосимепе. а, муйм о, гс =  "рисЁо. 9" > 

</НТМГ> 
В приведенном выше примере смена изображения происходит лишь при первом 
щелчке на нем. Последующие щелчки не приведут к видимым изменениям, по- 
скольку второе изображение будет заменяться им же. Чтобы повторный щелчок 
приводил к отображению предыдущего рисунка, сценарий необходимо слегка ус- 
ложнить: следует создать переменную-триггер (так называемый флаг), принима- 
ющий одно издвух возможных значений. По текущему значению флага сценарий 
может определить, какое именно из двух изображений следует отобразить. После 
смены изображения необходимо изменить и значение флага. Далее приведен ва- 
риант кода: 
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<«НТМЕ> 
<На р = "туто" $5АС = 'р!с{!. 91 опсИск = "тоспапде@ "> 
<5СНРТ> 
уаг Наг=Ра1зе // флаг (триггер) 
Рпсйоп  Иесвапзе() { // обработчик щелчка на изображении 
Е (Па) фФосишене, а 1, шуйше, ге = "рисЕ[. 1" 
[зе  фосишене. а, шуйшр, ге =  "рисЕ2. в" 
Па =!Наз // изменяем значение флага на противоположное 
} 
</5СВТРТ> 
<ИНТМЕ> 


Думаю, с изменением одного изображения все ясно. А как быть в случае несколь- 
ких изображений? Например, на веб-странице расположена галерея миниатюр 
((ПишбпаП$ — уменьшенных копий крупномасштабных изображений). Мы хотим, 
чтобы при щелчке кнопкой мыши на миниатюре она увеличивалась, а затем при 
щелчке на увеличенном изображении оно уменьшалось. Для решения этой зада- 
чи потребуется столько флагов, сколько имеется изображений. Флаги определим 
как массив, каждый элемент которого будет соответствовать отдельному изобра- 
жению. Далее мы не будем создавать отдельную функцию-обработчик события 
опс|ПскК для каждого графического объекта. Вместо этого создадим одну функцию- 
обработчик, которая кроме всего прочего будет сама определять, на каком именно 
изображении произошел щелчок. Идентификаторы Ш тегов <МО> зададим неко- 
торым регулярным образом (например "10", "ПШ", "12", ...). Так часто поступают 
при использовании массивов. Создадим еще два массива, содержащих имена гра- 
фических файлов: один для исходных изображений, адругой — для замещающих. 
Наконец, НТМГ-документ с изображениями сгенерируем с помощью сценария. 
Для этого сначала сформируем строку, содержащую теги ЧМО ...>, азатем запишем 
ее в документ. В листинге 4.1 приводится код, реализующий эту программу. 


Листинг 4.1. Код программы для увеличения миниатюр при шелчке мыши 


<НТМ> 

<УЭСНРТ> 

уаг ар!с = пем Аггау("рис И." а) /* массив имен исходных 
файлов */ 

уаг ар!с{2 = пем Аггау("р1с{2.911" ‚...) /* массивимензамещающих 
файлов */ 

уаг аЁ1ад = пем Аггау(ар1с®1.1епчёВ) // массив флагов 

/* Формирование строки тегов, описывающих изображения */ 

уаг хзег = "" 

Рог(Г =0; 1 < арс И. [епой; 1++){ 

ХУ = 'М@ Ш = "Е УС = "'о таре] +” отек = 

"итоспапдеО">" 

} 

доситеп. мг е (х$г) // запись в документ 

РАпсИоп  ИтревапееО { // обработчик щелчка на изображении 

уаг х1@ = еуепё.5гсЕетеп{.1 —_// 14 изображения, на котором был шелчок 


уаг п = раг$е]тЕ(х19.5и6$г(1)) // выделяем номер элемента 


И (аНади]) 
ФосишешЕ. а! 1 [х19 ] ге = арЕсЕ 1 [п] продолжение # 
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Листинг4.1 (продолжение) 


е1зе 

ФоситептЕ. а! [х!9].згс = ар!сЕ2 [п] 

аНаз[п] = !аНаё[п] /* изменяем значение флага 
на противоположное */ 

| 

</ЗСВТРТ> 


Обратите внимание, как мы обращаемся к свойству згс: дЧоситеп.аЕх14].згс, а не 

те 0.а1.х14.згс и тем более не доситеп(.а"х1а"|.згс. Это объясняется тем, 
что х! является строковой переменной, содержащей значение идентификато- 
ра ТО, а не собственно значением идентификатора. 


4.1.2. Подсветка кнопок и текста 


Рассмотрим задачу изменения цвета кнопки при наведении на нее указателя мыши. 
При удалении указателя с кнопки должен вернуться ее первоначальный цвет. Это 
так называемая подсветка кнопок. Сразу займемся общим случаем нескольких 
кнопок. В нашем примеретри элемента, задающие кнопки, находятся в контейне- 
ре формы <РОБМ>. К этому контейнеру привязываются обработчики событий 
оптопзеоуег (наведение указателя мыши) и оптопцзеой{ (удаление указателя 
мыши). Таким образом, инициатором (получателем) этих событий может быть 
любой элемент формы (в нашем примере — любая из трех кнопок). В обычном 
состоянии кнопки имеют серый цвет, заданный 16-м кодом аОаОа0О. При наведе- 
нии указателя мыши цвет кнопки становится желтым (уеПо\) (рис. 4.1). 


<НТМЕ> 
<ЭМЕ> 
тузУе {РГоп{-м/егайт: Бо!а; Баскагоипа-со1!ог: аОаОаб} 
</ЭМЕ> 
# 
<ГОБМ оптоцзеоуег = " ТОГСИ е‹ е1 " опмочвеоче 
="со1огсВападе ('аОаОаО')"> 
МРОТ ТУРЕ = "ВОТТОМ `" УАБЕ="перВаа"  С1АЗ$ = "шузу!е" опс сек = 
"а|егЕ('ВЬ! нажали кнопку’)"> 
МРОТ ТУРЕ = "ВОТТОМ" УАГОЕ = "Вторая" СТАЗЗ = "муз{у[е" опеск = 
"а|егЕ('Вы нажали кнопку 2')"> 
<1МРОТ ТУРЕ = "ВУТТОМ" УАГОЕ = "Третья" СГАЗ$ = "туз{у!е" опе ск = 
"а1егЕ('ВЬ: нажали кнопку 3 
</ЕОВМ> 
<5СВТРТ> 
ГапсНоп абчив ( 1ог) { // изменение цвета кнопок 
Ш (еуепЕ.згсетет.{уре == "БаИоп") 


еуеп{. згсЕетеп+. $Уе.бБаскагоипаСо|!ог = со|ог; 
| 
</ЗСВТРТ> 
</НтТмГ> 


Здесь в функции соогсвап?еО проверяется, является ли инициатор события объек- 
том типа БиИоп (кнопка). Если это так, то цвет кнопки изменяется, в противном 
случае — нет. Без этой проверки изменялся бы цвет не только кнопок, но и фона. 


Аналогичным образом можно изменять цвет и других элементов, например фраг- 
ментов текста. Если требуется подсвечивать текст, то он должен быть заключен 
в какой-нибудь контейнер, например втеги <Р>, <В>,<1> или <МУ>. В следующем 
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Рис. 4.1. Подсветка кнопки при наведении на нее указателя мыши 


примере цвет текста, заключенного в тег <В>, изменяется с синего на красный при 
наведении на него указателя мыши: 


<НТМЕ> 
Этот <В опттоизеоуе г= "сойогсй('геё ')" оптоизеоие "со1огсй ('Бше ') " 

Е "сотош: Ыше"”>Жирный текст</В> при наведении на него указателя мыйи 
изменяет цвет 

<УСЕТРТ> 

РапсНоп соогсй(соТог){ 
еуеп{.згс Е етепЕ. $ Уе.со!ог 


+/]е 
у | 


соог 


} 
</ЗСВРТ> 
«ИТМ 


4.1.3. Мигающая рамка 


Вы можете создать прямоугольную рамку, окаймляющую некий текст, кото- 
рая периодически изменяет цвет. Иногда этот эффект используют для при- 
влечения внимания пользователей. Рамка создается тегами одноячеечной таб- 
лицы с заданием нужных атрибутов и параметров стиля. Далее необходимо создать 
функцию, изменяющую цвет рамки таблицы на другой, и передать ее в качестве 
первого параметра методу зе щегуа!Ю. Второй параметр этого метода задает пе- 
риод в миллисекундах, с которым вызывается функция, указанная в первом пара- 
метре. Более подробно этот метод описан в разделе 2.8. 


В приведенном ниже примере рамка изменяет цвет с желтого на красный с перио- 
дом 0,5 с (рис. 4.2): 


<НТМЕ> 

<ТАВЬЕ ГШФ="шу а ВОКОЕК=1 УШТН=150 з4у1е="Богаег : 10 зо 1@:уе Ном" > 
<ТВ><ТО>Мигающая раМКа</ТО></ТА> 

<ПАВГЕ> 

<$СВТРТ> 


псиоп Иа$й() { 

И ((4осишевЕ. а) 

теги пи; 

Н (тувь. $ Ие.БогдегСо[ог == 


изменение цвета рамки, 
если в документе ничего нет 


'уеПо\м’) 
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гау{аБ. з4у[е .БогаегСо!ог= ‘геа* 


е!5е 
ту{аБ. з1у!е.рогаегСо[ог = 'уеПом’; 
зейптегуа!("Назп()", 500); // мигание рамки с интервалом 50 мс 
</ЗСВТРТ> 
</нтми> 


З 0:\Книга Зауаб сир у 
Файл Ораехч Вид Избранное Сервис 9г ие 


» 


[[Мигающая рамка * 


| Готово }-2! Мой компьюте; 


Рис. 4.2. Мигающая рамка 


4.1.4. Переливающиеся цветами ссылки 


Привлечь внимание посетителей к ссылкам на веб-странице можно с помощью 
эффекта динамического изменения их цвета. Мы не будем обсуждать здесь целе- 
сообразность этого метода, а сосредоточимся лишь на технической стороне. Суть 
задачи состоит в том, чтобы случайным образом выбирать и устанавливать цвет 
ссылок. В листинге 4.2 множества цветов, из которых происходит выбор, разли- 
чаются для уже использованных и еще не использованных ссылок. Эти множе- 
ства цветов задаются в виде массивов. 


Листинг 4.2. Код для динамического изменения цвета ссылок 


<НТМ> 

<А НВЕР="ИИр:/Лммм. аду га|. ги/-Чипаем/1_1$. Шт">Начало</А> 

<А НВЕЕ=" Пр: / /\мл\м\м. ааптга1. ги/-аипаем/ехатриез$ . 1пт_т">Примеры НМ. и 

ЧамаЗспир{</А> 

<А ННЕР=" ИИр://Лмим.адттга!.ги/-аипаем/тубоок.мт">МоН книги</А> 

<УЭСНРТ> 

асиИпКк=пем/ АггауО // массив цветов неиспользованных 
// ссылок 

ас тк [0] ='уеНом 

ас!ИтКк [1]='#8072780" 

ас!гИпк [2]= '#РРРЕ80 ' 

асиИпКк [3]='#408000° 

ас!гуИпк К-пем Аггауо // массив цветов использованных ссылок 

ас!и\уИпКк [0]='Ыие' 

асиуИтк [1)='ригр!е 

ас!гу!пк [2] ='Ыаск' 

аси\тКк [3] =‘’гед’ 
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Типсйоп соогспапдео { // изменение цвета 
Ппк=Ма{.гоипа ((астк.!епа{1+0.1)*Ма{И.гапдотО)) 
УПпк= Ма{й, гоипа ((ас!гуПпк. 1епо+{Н-0. 1)*Ма.гапдотО) 


Чоситеп+.ШтКСо!ог= асшИпк [Ипк] 
доситет{. муИ пкКСо!ог= аси\уШпк [уПпк] 


} 


зе! тегма! ("со!огспапде() ", 500) // изменение цвета через 500 мс 
</ЗСНРТ> 


</НТМЕ> 
Заметим, что в результате вставки этого сценария в НТМГ-документ все ссылки 
документа начинают переливаться разными цветами, поскольку мы изменяем 
свойства НикСоюг и УшКкСоюг объекта доситеп:. 


4.1.5. Объемныезаголовки 


Объемные (выпуклые) заголовки довольно эффектны на веб-страницах. Зачастую 
они создаются как графические файлы, которые вставляются в НТМГ-документ 
с помощью тега <МО>. Однако во многих случаях более экономичным является 
решение, основанное на использовании таблиц стилей. 


Идея создания объемного заголовка довольно проста: достаточно несколько над- 
писей с одинаковыми содержанием наложить друг на друга с некоторым сдвигом 
по координатам. Потребуются как минимум две такие надписи. Одна из них пред- 
назначена для создания эффекта тени (задний план), а вторая располагается над 
первой. Можно использовать еще одну такую надпись для создания эффекта под- - 
светки. С эстетической точки зрения наилучший эффект достигается путем под- 
бора цветов надписей (игрой света и тени) с учетом цвета фона. С технической 
точки зрения нужный эффект получается применением таблиц стилей. В листинге 
4.3 приведен пример НТМГ-документа, в котором объемный заголовок создает- 
ся с помощью трех наложенных друг на друга надписей (рис. 4.3). Таблица 
стилей определяется для тега абзаца <Р>. В данной таблице задаются цвет и па- 
раметры шрифта надписей. Позиционирование надписей производится пара- 
метрами атрибута МЕ контейнерных тегов <ГУ>, в которые заключены теги 
абзаца. 


Листинг 4.3. Код для создания объемного заголовка 


<НТМЕ> 
<НЕАБ><ТИЕЕ>ЗА эффект</ТТЕЕ><НЕАО> 
<! Каскадная таблица стилей для абзаца> 
<МЕ> 
Р {Гоп{-ТатПу: $апз-зег!{; Гоп+-$12е: 72; Топ{-ме!9Н{:800; 
со|[ог: О0аааа} 
Р.ОПНаПЕ {со[ ог: $Имег} 
Р.зПпааом {со!ог!аагкгеа} 
</ЭТМЕ> 
<ВОГУ ВСОО:ОВ = аеб98с> 
<! Тень > 
<ОМ ЭТИЕ = "роз! Чоп : абзо|и{е; {ор:5; 1ем:5"> 
<Р СЁАЗ$$ = зпадом>Объемный заголовок</Р> 


продолжение *у 
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Листинг 4.3 (продолжение] 
<\ Подсветка > 


<БГУ ЭТМЕ = "роз оп: або ие; {0ор:0; 1еЁё:0"> 
<Р С А5$ = Манна н{>06Бемньшш загоповок</Р> 
</0Т\> 

<! Передний план> 

<ОТУ УТУЬЕ = "роз11оп:азо1аёе; (ор:2; 1еЁё:2"> 
<Р>0бъемный заголовок‹/Р> 

</01\> 

</ВорУ> 

</НТМЬ> 


34 эффект - 
р:.деь: 


Рис. 4.3. Объемный заголовок, созданный с помощью каскадной таблицы стилей 


Теперь рассмотрим функцию, которая создает заголовок с заданными параметра- 


ми (листинг 4.4). 


Листинг4.4. Пример функции, которая создаетзаголовоксзаданными параметрами 
ТипсНоп 93 (1ех{, > у, 1со[ог, 1365 , Гме!а р, НатИу ‚ 21 па) { 
/* Объемный заголовок 

Параметры: 

1ехЕ - текст заголовка 

х - горизонтальная координата (1ей) 
У - вертикальная координата (юр) 
{со!ог - цвет переднего плана 

1512е - размер шрифла (п) 

Вуеее - вес (толщина шрифта) 
атПу - название семейства шрифтов 
па - 2-4ех ый 


и (Ию о тешгп па /* если не указан текст, то ничего не делаем */ 


/* Значения параметров по умолчанию: ых 
и  ИНашИу) Га Пу='аг'а!’ 

И Омео  №ме2=800 

И (15126) 1512е=36 

и  (со1ог) 1со1ог='00аа" 

И (у У=0 
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Е (хх) х=0 

/* Внутренние настройки */ 

уаг $4=5 ‚ №9=2 // сдвиг тени и подсветки 

уаг хита="" 

Е (2119) ххта=" ;2-|п@ех: "+2та 

уаг хз Уу1е=' Еопё-ЁЕаш11у: ' + Еаш1]у + ';Еопе-812е: ' + Е517е + 
`;Еопе-ме1аье: ' + Еме1аье+!;' 

уаг хзЕг = '<ОТУЗТУВЕ = "роз1610оп: аБво1аее; вор:' + (у + за) + 
сева тео аа) охота. 

х$зЕг+= '"<Р 56УТ е = "' + хэзбу1е + ' со1ог:аагкгеа">' + ЕехЕ + '</Р></ОТУЪ' 

хзЕг+= '<РТУ СТУГЕ = "роз1Е 101: арзо1щее; кор:' + у + ';1е:' +х + 
х211а + '\">' 

ху = '<Р уе =" ' + хуу1е + 'со|ог: $11 уег" >" + 1ехЕ + '</Р></Б[У>"’ 

хз(+= '<ММ ЭТУГЕ = "роз топ : абзо| ще; фор: + (ут 14) + '; её: + 
(х + Ва) + хита + '">' 

х$г+= 'ЗР з(1у1е = " + хыу[е + 'со!ог:” + тсо1ог + "7 + чехё + ' 

Чоситеп{ . мгЦе (х$1г) // запись в документ 


› 
В этой функции создается строка, содержащая необходимые теги, которая затем 


записывается в НТМГ-документ. Среди параметров функции последний пред- 
ставляет 7-ш4ех, с помощью которого можно установить слой, в котором нахо- 
дится заголовок, и тем самым указать, будет ли заголовок располагаться над или 
под каким-либо другим видимым элементом документа. Элементы с более высо- 
ким значением 7-[пдех находятся над элементами, у которых 7-[п4ех меньше. Пе- 
рекрытие элементов с одинаковыми значениями 7-ш4ех определяется порядком 
следования их тегов в НТМГ-документе. Значения параметров по умолчанию 
(то есть когда они не указаны) вы можете задать самостоятельно. Можете также 


поэкспериментировать со значениями внутренних параметров $4 и Ва, которые 
определяют размеры тени и ореола подсветки. 


Ниже приведен пример НТМГ-документа со сценарием, создающим три заголов- 
ка с различными параметрами (рис. 4.4): 


<НТМЬ> 

<НЕАР><ТТТЬЕ>ЗАа эффект</ТТТи,><НЕАО> 

<ССВТРТ> 

ЕопсЕтоп 93 (сехё, х, у, (с01ог, Ё812е, Еме1чье, ЕЕ аш1 1у, 2114) { 
// код 


1 

} 

@3 ("Привет!", 50,15, 'геа' ‚40,800, 'запз-зех1#') 

@3 ("ЗТо не графика", 50,50, 'Ъ1ае' ‚72,800, ' Е1мез ') 


93( “Это просто стильтекста" ‚10, 80, '00ЕЕ00', 92,900 гта] ) 
</ЗСВТРТ> 
</НТМи> 


4.1.6. Применение фильтров 


С помощью так называемых фильтров каскадных таблиц стилей можно получить 
разнообразные интересные визуальные эффекты. Например, постепенное появ- 
ление (исчезновение) рисунка, плавное преобразование'одного изображения 
в другое, задание степени прозрачности и т. п. В большинстве случаев веб-дизай- 
неры добиваются подобных эффектов с помощью обработки изображений сред- 
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Е Готово 


| 
уго не графика 
Го Просто | 


етиль текста | 


> 


| 


чо т 


— Е Мой компьютер — 


Рис. 4.4. Заголовки, созданные с помощью функции &а3() 


ствами графических редакторов, таких как Адобе Р|по{озВор, Масготе а ЕазВ 
и др. При этом графика для Веб обычно сохраняется в файлах формата 21, рпз, 
рез и $\. 


СТЕ очень популярен в веб-дизайне. Поддерживает чересстрочную загрузку, 
прозрачность пикселов и анимацию. Однако глубина цвета в С1Е-файлах огра- 
ничена лишь 256 цветами, а пикселы могут быть либо полностью прозрачны- 
ми, либо полностью непрозрачными (полупрозрачности быть не может). 


РМО имеет много общего с форматом СТЕ, но позволяет сохранять полноцвет- 
ные изображения и не поддерживает анимацию. 


]РЕС — еще один графический формат, часто используемый в веб-дизайне. 
Позволяет сохранять полноцветные изображения фотографического качества 
и загружать их в чересстрочном режиме, но не поддерживает прозрачность 
и анимацию. 


В формате 5УЕ сохраняется векторная графика и анимация, созданные в паке- 
те Масготе а НазВ, а также импортированные растровые изображения и зву- 
ковое сопровождение. Прозрачность изображений здесь может принимать 
множество значений от 0 до 100. 


СОВЕТ . - - _ 


Во многих случаях при создании небольших анимаций (например, баннеров) и других не 
слишком сложных визуальных эффектов можно вполне обойтись средствами таблиц сти- 
лей и /амаЗсир\, достигая своих целей при существенно меньшихзатратах ресурсов (объем 
файлов, время на разработку). При разработке более сложных проектов фильтры можно 
комбинировать с другими средствами. 
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Фильтр следует понимать как некий инструмент преобразования изображения, 
взятого из графического файла и вставленного в НТМГ-документ с помощью тега 
<МО>. Однако следует иметь в виду, что фильтры работают только в [Е 4+. В этом 
подразделе мы рассмотрим несколько наиболее интересных фильтров. Наша за- 
дача заключается в том, чтобы научиться правильно применять фильтры. 


Прозрачность 


Прозрачность графического объекта в диапазоне целочисленных значений от 0 до 
100 можно установить с помощью фильтра а1рва. Значение 0 соответствует пол- 
ной прозрачности изображения, то есть оно становится невидимым. Значение 
100 соответствует, наоборот, полной непрозрачности изображения. Поэтому пра- 
вильнее говорить, что а1рВа является степенью непрозрачности. Сквозь прозрач- 
ные графические объекты видны нижележащие изображения. Степень их види- 
мости определяется значением прозрачности изображения, лежащего выше. Кроме 
того, прозрачность имеет несколько вариантов градиентной формы. Например, 
можно сделать так, чтобы прозрачность постепенно увеличивалась от центра 
к краям изображения. Это позволяет просто и весьма эффективно согласовать 
вставляемое в документ изображение с фоном. Веб-дизайнеры хорошо знают, что 
выполнение такой операции с помощью графического редактора требует опреде- 
ленных навыков и усилий. 


Фильтр а1рва, как и другие, задается с помощью каскадной таблицы стилей и име- 
ет ряд параметров. В следующем примере для графического изображения стиль 
определяется с помощью атрибута ЗЕ 

Ме 10 = "тут" $ВС = "рЕсё. 91" 

УМЕ = "роз! от: абзо|и{е; фор: 10; [е#:50; 

И Цег: аГрва (орасму = 70. {уе = 3)"> 
Здесь параметр орасцу определяет степень прозрачности (точнее, непрозрачности) 
как целое число в диапазоне от 0 до 100. Параметр $е задает градиентную фор- 
му распределения прозрачности по изображению как целое число от 0 до 3. Если 
параметр $ не указан или имеет значение 0, то градиент не применяется. Фильтр 
а[рва имеет и другие параметры, определяющие прямоугольную область изобра- 
жения, к которой применяется фильтр. По умолчанию он применяется ко всему 
изображению. На рис. 4.5 представлено исходное изображение и это же изобра- 
жение, обработанное фильтром а1рВа с параметрами орасцу = 70 и %уЕ = О, 1, 2, 3 
(слева направо и сверху вниз). 


Фильтр можно определить в каскадной таблице стилей внутри контейнерного тега 
<ГИЕ> с помощью ссылки, имеющей следующую структуру: 
#1с)_ изображения {1 Мег: имя_фильтра (параметры) } 


Заметим, что если не использовать символ #, фильтр не будет работать. В этом 
случае рассмотренный выше пример можно оформить следующим образом: 


<НТМЕ> 
<$ТУЕЕ> 
#тута { роз от:абзо!и{е; {ор: 10; 1е!: 50; ЕИ{ег: а!рпа(орасМу = 
70, з1у!е = 3)} 
</ЗТУГЕ> 
<МС Ш = "туш" $ВС = "риасЕ.5Ё" 


</нтмЕ> 
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ЦОЛ Книга ай РЕ Нил о |и{егпе! ЕОрЮ 


Е А 


Рис. 4.5. Результаты использования фильтра а!рва с различными параметрами 


Доступ к свойствам фильтра в сценарии определяется следующим образом: 
Чоситен. а||. 1с1_изображения. #1 Иегз["имя_фильтра"] ‚параметр = значение 

Для рассматриваемого случая это выражение может иметь, например, такой вид: 
доситеп{.а!. му!тад.ЕИ{ег$ ["а1рпа"].орасКу= 30 

Итак, вы можете управлять в сценарии степенью прозрачности и другими пара- 

метрами фильтраа!рвВа. 

Выше мырассмотрелисинтаксисвыражений, воспринимаемый браузерами [Е4+. 

Для 1Е5.5+ можно использовать другой синтаксис, рекомендованный Мгозой. 


Его особенность в том, что в каскадной таблице стилей задается ссылка на специ- 
альный компонент и имя фильтра: 


# 1с1_ изображения {Е11{ег: ргоч!а : ОХтадеТгапогт. Мсгозо+{+. 
имя_фильтра(параметры)} 


Пример 

# туто {ЕИТег: ргода:ОХ!тадеТгаптзТогт.М!сгозоН.а!рпа 

(орасму = 70, зу!е = 3)} 
Доступ к свойствам фильтра в сценарии в новом синтаксисе определяется следую- 
щим образом: 


аоситеп{.а!|.1й_изображения. Нег$ ["ОХпадеТгаптогт. МсгозоН. 
имя_фильтра"].параметр = значение 
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Пример 
доситепе.а11.ту1щд. #116 ег [ "ОХТиадеТхгапзЕ ог. М1сгозоЕ.а1рва"] .орас1еу = 30 


СОВЕТ 
Фильтры можно применять не только к графическим изображениям, но и кдругим элемен- 
там (например, к текстам, текстовым областям, кнопкам). 


Трансформация 


Фильтры преобразования изображений позволяют организовать постепенное 
появление (исчезновение) изображения, а также трансформацию одного графи- 
ческого объекта в другой. Это так называемые динамические фильтры. В отличие 
от статических фильтров (например, а1рВа), их применение обязательно связано 
со сценариями. Суть преобразования графического объекта заключается в том, 
что сначала необходимо зафиксировать первое изображение, затем выполнить 
замену этого изображения другим и/или изменить параметры того же самого изоб- 
ражения, а после этого выполнить собственно трансформацию. Все эти действия 
выполняются в сценарии. Фиксация и трансформация изображения производят- 
ся с помошью специальных методов фильтра — соответственно аррУО и р1ау(). 
При желании остановить процесс преобразования можно с помощью метода $®юр0. 


Для преобразования изображений используется фильтр геуеа(гап$. Он имеет сле- 
дующие параметры: 
. огайоп — длительность преобразования в секундах (число с плавающей точ- 
кой); 
. бтгапу@юп — тип преобразования (целое число от 0 до 23); типу 23 соответству- 
ет один из типов от 0 до 22, выбранный случайным образом. 
Сначала рассмотрим применение фильтра геуеаЙгапз для создания эффекта появ- 


ления изображения. Ниже приводится пример, в котором изображение постепен- 
но появляется после загрузки документа, то есть по событию оп]оа4: 


<НТМЕ> 

<ВОБУ оп]1оа4 = "гап$огт()"> 

<1М6 0 = "пут" УКС = "русЁ. 21!" ЭТУГЕ = "роб 1оп:абзо| ие; {ор:10; 

[е#:50; у1516111%у = "Б1а4еп" НШег:геуеа{гаи$ (4ига 1 оп= 3, 

Егапз16101 = 12)"> 

</ВОПУ> 

<ЭСВТРТ> 

Еопсб1оп 6гапзЕоггао{ // появление изображения 

босимепё. а11.пу119.36у1е.у15161116у = '"1104ел" /* делаем изображение 

невидимым */ 

пу119. Е116ег$ С 'геуеа1&гапз") . арр1у0 /* фиксируем исходное 
состояние изображения */ 

пу119.56у1е.\13151116у = "у151е" // делаем изображение видимым 

пу119. Е 11Сег5С ' геуеа]Егапз") „р1ау() // выполняем преобразование 

} 

</ЗСВТРТ> 

</итмг> 


В этом примере, в функции (гапзРогт(), мыделаем изображение, заданное в НТМТ- 
документе тегом <МС>, сначала невидимым, поскольку хотим, чтобы оно возни- 
кало из небытия, а не исчезало. Затем с помощью метода арр!у() мы фиксируем 
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его как исходный кадр в цепочке кадров преобразования. Далее готовим конеч- 
ный кадр — просто делаем изображение видимым. Наконец, применяем фильтр 
с помощью метода р!ау(). Мы использовали тип преобразования ({гап$ оп = 12), 


соответствующий эффекту плавной трансформации. 


ВНИМАНИЕ — - — - - — 
Тип преобразования и его длительность можно задать не только в определении стиля 
изображения, но и в сценарии. 


<НТМ1 > 

<ВОРУ оп1оа = "ЕгапзЕогмоО "> 

<ТМС ТО = "пуд"  5ВС = "р1сё.91Ё" СТУБЕ = "роз11оп: абзо1аёе; (ор:10: 

1еЁ6г$0; “ЕЁ ег:геуеа16гапз"> 

</ВОБУ> 

<ЭСВТРТ> 

РапсНоп НапзЮгтоО { // появление изображения 

дФоситет . а! .шупие. 5 У е.у15ЮИИу = "В14еп" /* делаем изображение 

невидимым */ 

ту1тЕ. Т11тег$ ("геуеа1+гапз") .аррту() /* фиксируем исходное 
состояние изображения* 

шупие. (уе. у ИИу = "у1$1[е" // депаем изображение 

ВИДИМЫМ 


шупи?. ИЦег$С'геуеагап$") „Тгапя Чоп = 12 /* указываем тип 
преобразования */ 
/* выполняем 
преобразование 


длительностью Зс */ 


тута. ГШегзС‘геуеаЙгапт$") . р!ау(3) 


</5СНРТ> 

<НтМ- 
Очевидно, чтобы добиться исчезновения изображения, необходимо поступить 
наоборот: сначала сделать его видимым, а затем невидимым. 


Теперь рассмотрим более общий случай: трансформацию одного графического 
объекта в другой. Вы должны понимать, что в отличие от рассмотренного выше 
случая, эта задача сводится к установке начального и конечного изображений. Это 
делается путем присвоения нужных значений свойству згс объекта, соответствую- 
щего изображению. 


<НТМЕ> 

<ВОБУ оп1оа@ = "ёгапзЕогиа () "> 

<1МС ТО = "пуд"  58С = "р1се1.91Е" УТУЬЕ = номе: абзо1и(е; 60р:10; 
16е1(:50; РЕГфег: геуеа | гаш (Фигафтоп = 3, (гапз! от = 12) 

</ВОУ> 

<ЭСВТРТ> 


ЕорсЕ1оп &гапзЕоги2 () { 
шу1иа. Е116егз ("геуеа1%гапз"). арр1у () 


// появление изображения 

/* фиксируем исходное 
состояние изображения */ 
заменяем изображение 
выпопняем 
преобразование */ 


Чоситеп{ . а11 МЕ. 5ГС _ “р1 


му1 


// 


пу119. Е1Теегз ("геуеа1%гапз") . р1ау () }* 


} 
</УСВТРТ> 
</НТМЬ> 
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В следующем примере зададим трансформацию изображения, которая происхо- 
дит при щелчке на графическом объекте. При первом щелчке изображение из 
файла р1с|.2! трансформируется в рисунок из файла р1с2.2[. При следующем 
щелчке, наоборот, второй рисунок трансформируется в первый ит. д. 


<НТМЕ> 
<ма 10 = "туто” опсИсКк = “" ЧаптпзРогт$О" ЭС = "р!сИ. 91” $ТУЁЕ = 
"роз {юопт:абзо!и{е; {ор:10; |еН:50; НЩег:геуеаНгап$ (дигай опт = 3, 
{гапз!: Ной = 12)"> 
<ЗСВТРТ> 
псНоп тапзоюгтВО // преобразование изображения 
муттх . #11 тег$ ("геуеа1{гап$") . арр1у // фиксируем исходное 
изображение 
{  (доситепЕ. а|. тута. $гс .{пдехОГ( "р!с 1") != -1) /* определяем 
конечное 
изображение */ 
досимеп{.а1. муту. тс = "р! с12.91” 
е!5е 
ФосишепЕ. а |. шу!те.$ге = "русЕ[. 511" 
му! шо. 1 Г 1ег$ ( "геуеа | {гапз").р!ау() // выполняем преобразование 
} 
</ЗСВТРТ> 
</НТМГ> 


СВОЙСТВО згс содержит полный ОВГ-адрес графического объекта, даже если мы 
присваиваем ему только имя файла. Поэтому в теле функции {гап$Рогт3() прихо- 
дится выяснять, входит ли строка с именем файла в ОВГ-адрес, а не проверять, 
равен ли ОВГ-адрес имени файла. 


Рассмотренный выше синтаксис выражений воспринимается браузерами 1Е4+. 
Для 1Е5.5+ можно использовать другой синтаксис, рекомендованный М!сгозой. 
Его особенность состоит в том, что в каскадной таблице стилей задается ссылка 
на специальный компоненти имя фильтра. Последний пример в этом синтаксисе 
имеет следующий вид: 


<НГМЕ> 
<ЭТУБЕ> 
#1у1ш9 {роз1Е1оп:аБзо1и6е; (ор:10; 1еЕЁ:50; 
{116 ех:ргод1а : рхтиадеТтгапз Еоги. М1 скозоЕЕ . геуеа1 + гапз (апгае1оп = 3, 
Стапз1Е1оп = 12)} 
</УТУБЕ> 
<ТМб ТО ="щу119" опс11Сск = "ЕгапзЕогмз()" 5ВС = "еагЕВ. 91Ё"> 
<ЭСВТРТ> 
РЕопсе1оп 6хапзЕотгиав() { // преобразование изображения 
шу 119. Е1 Теегв ( "рхтиадеТтгапзЕ ога. М1 схозоЕе .геуеа1Егапз ").арр1у() 
/* фиксируем исходное 
изображение* / 
1Е (аосишере.а11.му1ш9.зтс.1паехОЕ ("еагЕВ") |= -1) /* определяем 
конечное 
изображение* / 
осимепе.а11.му1п9.3тс = "зип. 91Ё" 
е1зе 
осимепе .а11.му1п9.згс = "еагЕВ.а1Е" 


пу1т9. Е11Сегз ("рхтиадеТтгапз Еоги. М1 скозоЕЕ . геуеа1+гапз").р1ау 0 
/'выполняем 
преобразование */ 


194 Глава 4. Примеры сценариев 


</ЗСВТРТ> 
<иНТМЕ> 

Повороты 

В браузерах 1Е5.5+1 возможно применение фильтра Фаз1ситаз»е, имеющего множе- 
ство параметров, с помощью которых изображение можно повернуть на угол, крат- 
ный 90°, задать прозрачность, зеркально отразить, определить маску и др. В 1Е4+ 
все эти эффекты, за исключением поворотов, создаются отдельными фильтрами. 
Порядок их применения такой же, как и фильтра ава, задающего прозрачность. 
Здесь мы рассмотрим создание эффекта поворота. 


Параметр гофаНоп фильтра Ъаз1с ппазе принимает целочисленные значения: 0 (нет 
поворота), 1 (90°), 2 (180°), 3 (270°). В примере, приведенном ниже, в результате 
щелчка на изображении оно поворачивается на угол 90’. 


<НТМЬ> 
<ЭТУБЕ> 
#щу119 {Е116ег: рго914: ОХТиадетгапз ога. М1 сгозоЕЕ. Баз1с1таде} 
</ЗТУВЕ> 
<1М6 10 = "пупа" 5тс = "р1сё.911" опс11ск = "гобог()"> 
<ЭСВТРТ> 
РапсИоп гофог(){ // повороты 
мат? г: -— 
досишепе. а11. му1щ9.Е1Т6егз [ "ОХТиадеТгапз Е ога. М1сгозоЁе. раз1с1таде"]. 
госа1оп 
1Е (у ==3) 
г=0 
е1зе 
++ 
Чосишепе .а11.му1щд.Е1Теегз ["ОХТиадеТхапзЕоги.М1скозоЕе. Баз1с1таде"] 
гобае1оп = г 


} 
</5СВТРТ> 


Применение нескольких фильтров одновременно 


К видимому элементу можно применить несколько различных фильтров одно- 
временно. В следующем примере мы делаем графический объект полупрозрачным 
с помощью фильтра а1рВа и трансформируемым с помошью фильтра геуеагапз. 
Полупрозрачным изображение становится сразу при загрузке в браузер, а транс- 
формация происходит при щелчке на нем. Разумеется, вы можете придумать 
и другой сценарий применения фильтров. Вот вариант кода, реализующий мой 
сценарий: 

<НТМГ> 

<1МС ТО = "пуд" 010611ск = "&гапзЕогиз Г)" 5ВС = "еагёВ.91Ё" 

СТУЬЕ = "роз1&10п.-абзо1е; (ор:10; 1еЁё:50; 

+ | еуеа1 га! 'игае1оп = 3, (гап$161ор = 12), а1рЬа(орас1 ву = 50)" 

<ЭСВТРТ» 


Елсе1о0 %гапзЁогиЗ () { // преобразование изображения 
п Г хе! еа]1 {гап ›1 // фиксируем исходное 
// изображение 
1Е (досишепе. а11 .шу1щ9.5тс. 1п4ехоЕ ( "р1сё1") 1!=-1) /* определяем 
конечное изображение */ 
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босищепе. а11.му1п9. гс = "р1С62.91Ё" 
е1зе 
босищепе.а11.му1щ9.8тс = "р1061.91Ё" 
му119.Е11Сег$ ("геуеа1Егапз").р1ау () /= выполняем 
преобразование */ 
</ЗСВТРТ> 
</НтТмМЬ> 


4.1.7. Эффект печати на пишущей машинке 


Постепенный вывод на страницу текста (эффект печати на пишущей машинке) 
можно создать на основе использования метода 5еЙщегуаЮ. Об этом и других 
методах управления во времени уже говорилось в разделе 2.8. 


Ниже приводится НТМТ-документ с заголовком и текстовой областью, задавае- 
мой тегом <ТЕХГАВЕА>. Сценарий в этом документе выводит в текстовую область 
символы некоторой строки с задержкой 0, 1 с. После завершения вывода всей строки 
этот процесс останавливается. Функция \Цех{О просто формирует строку, кото- 
рую требуется вывести в текстовой области в данный момент. Собственно вывод 
производится путем присвоения значения свойству уаше текстовой области. Функ- 
ция \Цех(О передается в виде строкового параметра методу зе 1щегуа!О, который 
и вызывает ее периодически с интервалом, указанным в миллисекундах, в каче- 
стве второго параметра. В примере этот интервал равен 100. Метод зе И\иегуа1О 
возвращает целочисленный идентификатор запущенного процесса, который мы 
сохраняем в переменной хйщегуа!. Это значение передается методу ЧеайщегуаЮ 
как параметр, чтобы завершить процесс периодического вызова функции \\ех®Ю, 
когда «напечатается» вся строка. 


<НТМЕ> 

<НРМоя веб-страница</Н1> 

<ТЕХТАВЕА ТОР = "тубехе" ВОМ$ = 8 СОГ5 = 25></ТЕХТАВЕА> 

<ЭСВТРТ> 

уаг шузЕхг = "Привет, мои друзья! Рад вам сообщить приятное известие" 
уахг азЕг = шузехк.5р11е("") // разбиваем строку на массив 


// СИМБОЛОБ 
уахг Сурезек = "" 
уаг 1 = 0 
уахг х1пеегуа1 = зеЕ1пеехгуа1 ("ихеехЕ ()" , 100) /* периодический вызов 
функции мибехе() */ 


ЕарсЕ1оп игеехе () { // вызывается с помощью метода веё1пеегта1 () 
1Е (1 < азег .1ердаеВ) { 


СурезЕг+= азЕх[1] // выводимая строка 
аосимепе.а11.мусехё.уа1ие = Гурезег // вывод строки 
1++ 
}е1зе 
Зеагицкегуа!Схикегуай) // прекращаем вывод текста 
} 
</5СЕРТ> 
</НТМТ» 


Другие примеры использования метода зе ии(егуа!О вы найдете в следующем 
разделе. 
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4.2. Движение элементов 


Перемещение видимых элементов НТМГ-документа в окне браузера основано на 
изменении значений параметров позиционирования {ор и ей таблицы стилей. Вы 
можете указать эти параметры в атрибуте УМЕ или в теге <ГИЕ> для тех тегов, 
которые задают видимые элементы (изображения, тексты, ссылки, кнопки ит. п.). 
Затем остается только определить в сценарии способ изменения параметров ко- 
ординат {ор и Пей для того или иного элемента. Можно заставить элемент пе- 
ремещаться постоянно, в течение заданного времени или в ответ на события 
(например, по щелчку кнопкой мыши, при наведении указателя мыши на эле- 
мент ит. п.). 


ВНИМАНИЕ - 
Оператор цикла для организации расчета координат обычно не применяется, поскольку, 
пока выполняется цикл, другие выражения сценария не работают. 


Чтобы распараллелить вычислительные процессы, используют методы зе щегуаЮ 
и зе ТипегО, описанные в разделе 2.8. 


4.2.1. Движение по заданной траектории 


Схема сценария, осуществляющего непрерывное перемещение видимого элемен- 
та документа, имеет следующий вид: 
ТипсНоп шт томе) { // инициализация движения 


ад // подготовка к запуску функции томе() 
зе] пеегуа1 ("то\уе ()", задержка) 


ТипсНоп то\уе(){ 
/* изменение координат {ор и Тем 
стиля перемещаемого элемента */ 


// вызов функции для перемещения элемента 


Таким образом, мы создаем две функции, имена которых могут быть произволь- 
ными. Первая функция, шИ_тоуе(), осуществляет подготовку исходных данных 
и вызывает метод зеШщегуа!Ю с указанием в качестве первого параметра имени 
второй функции тоуе() в кавычках. Вообще говоря, первый параметр метода 
зе ицегуа() является строкой, содержащей выражение, которое должно выполнять- 
ся периодически во времени. Вторая функция, тоуе(), изменяет координаты эле- 
мента. Поскольку метод зе 1(егуа1О вызывает функцию тоуе() периодически через 
заданное количество миллисекунд, то координаты элемента изменяются посто- 
янно. При этом создается эффект движения. Скорость и плавность движения за- 
висят от величин приращения координат (в функции тоуеО) и временной задерж- 
ки (второго параметра метода зе щегуа!О). Чтобы начать перемещение элемента, 
необходимо просто вызвать первую функцию, шй_тоуе(). 


Линейное движение 


Рассмотрим в качестве примера сценарий линейного перемещения изображения, 
то есть движения по прямой линии. 
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<НТМГ> 

<ТМС 10="щу1щ9" 58С="р1сё.91Е " 5ТУШЕ="роз1 101: абзо1иее; Еор:10;1еЕе:20"> 
<ЭСВТРТ> 

РорсЕ1оп 11016_поуе() { 

ах = 8 // приращение по у 

Ау = 3 // приращение по х 

е{Тптегуа1 тоуе ()" 200) // периодический вызов функции 
шоуе () 

} 

ЕорсЕе1оп поуе() { // изменение координат изображения 


/* Текущие координаты: */ 

уаг у = рагзе1пе (досцшепе.а11.му1ша. з6у1е, вор) 
уаг х = рагзе1пе (досишепе. а11.му1мд, з6у1е,1еЕе) 
/* Новые координаты: */ 

досишепе .а11.щу1щ9.з6у1е. вор = у + ду 
досишепе.а11. шу1п4.з6у1е.1еЕЁ = х + ах 


} 


шИ_штоуе() // начинаем движение 

</ЗСВТРТ> 

</НТМЕ> 
Обратите внимание, что переменные ах и ду являются глобальными и поэтому 
видны в функции тоуе(). Если бы мы определили ихв шИ_тоуе() с помощью клю- 
чевого слова уаг, то они стали бы локальными и недоступными в тоуеО. Заметьте 
также, что значения параметров позиционирования в таблице стилей имеют стро- 
ковый тип. Поэтому нам потребовалось применение функции рагзеш"О для при- 
ведения их к числовому типу. 


Теперь усовершенствуем приведенный выше код: сделаем так, чтобы идентифи- 
катор перемещаемого объекта, а также приращения координат и временную за- 
держку можно было передавать функции шШИ_тоуе() в качестве параметров. В ре- 
зультате мы получим универсальную функцию линейного перемещения любого 
видимого элемента. Вот вариант соответствующего кода: 


Гипс оп Ш _шоуе(х19, ах, ау) { 


‚аг ргтз&г = Рожа зе. Ее РВ ау /* строка параметров 
для тшоуе() */ 


ргтзг = "тоуе(" + ргшзг + ")" 

5еЙщегуа!(ргт$ г, . 200) /* периодический вызов 
функции шоуе() */ 

} 


Еопсе10п поуе(х1а, @х, 9 { 

у = рагзе1т (досишепе. а11[х14] .з6у1е. ор) 
х = рагзе]1 п (досишепе. а11 [х14] . з6у1е. 1еЕ%) 
досишепе.а11.пу1п9.з6у1е. бор = у + ду 
досишепе.а11.му1ша.з6у1е. 1еЁЕ =х + 4х 


) 


|п1Е_ моуе ( "тут", 10, 5) // пример вызова функции 
Обратите внимание, как методу зеИ\иетуа!О передается указание на функцию 
тоуеО с параметрами. В явном виде параметры функции, указанной в вызове ме- 
тода зе щегуа!О, передавать нельзя, поскольку первый параметр этого метода 
имеет строковый тип. Поэтому мы и формируем то, что ему требуется, — строку. 
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Остановка движения 


Рассмотренные выше сценарии обеспечивают непрерывное перемещение элемента 
документа. Поскольку это перемещение осуществляется по прямой линии, то рано 
или поздно элемент выйдет за пределы окна браузера. Разумеется, можно усовер- 
шенствовать функцию шоуеО таким образом, чтобы она удерживала элемент в не- 
которой области окна браузера, изменяя в случае необходимости, например, знак 
приращений координат. Однако может потребоваться, чтобы элемент пересек окно 
браузера и больше не возвращался. Тогда полезно остановить движение уже не 
видимого элемента. Для этого служит метод @еайщегуа, единственным пара- 
метром которого является целочисленный идентификатор, возвращаемый мето- 
дом зе Ищегуа!О. 


Чтобы иметь возможность прекратить движение элемента, следует сохранить зна- 
чение, возвращаемое методом зе щегуа!О, в глобальной переменной, а затем ис- 
пользовать его в качестве параметра метода ЧеайщегуаЮ в теле функции тоуе0. 
Напомню, что тоуеО — функция, имя которой передается в качестве первого па- 
раметра методу зе ицегуа1О. Сценарий с запуском и остановкой движения может 
выглядеть, например, следующим образом: 


ГапсНоп шИ_шоуе(х!а4, ах, ау) { 


уаг ргшзуг = "+ ха "'," +ах + "+ ау ” строка 
параметров 
для тоуе() */ 

ргтзг = "тюуе(" + ргтяг + " 

19 поуе = зеИщегуа! (ргиа$@`, 20) '’ сохраняем 
идентификатор 


движения */ 


} 


РапсНоп шоуе(х1а, 9х, 94{ 
у = рагзе Е (досишепЕ. а П[х19] 56 У[{е. ор) 
х = рагбзешЕ(аосишепе .а[х!а] . з& УТе. 1еЁ() 
етё.а|. тут? . $ (У1е. ор = у + 4у 

) пЕ.а|. туже. $ У1е 1еЁё = х + ах 

И! (фагзе1 п (4осилетЕ. а1[х19] „з4у1е.1е!е) > 350) /* остановка 
по условию */ 
с1еаг!птегуа! (14 _ тоуе) 


‚ 5) // начинаем движение 


В этом примере движение остановится, как только горизонтальная координата 
элемента превысит 350 пикселов. 


Движение по эллипсу 


Теперь рассмотрим организацию движения по замкнутой траектории. Для при- 
мера возьмем эллипс, поскольку его легко модифицировать. Движение по эллип- 
су задается несколькими параметрами, такими как большая и малая полуоси, по- 
ложение центра и угол поворота относительно горизонтали, угловая скорость 
перемещения и др. (рис 4.6). В частном случае, когда одна из полуосей эллипса 
равна нулю, траектория вырождается в прямую линию. При этом движение будет 
происходить то в одну, то в другую сторону. Очевидно, в случае равенства полу- 
осей траектория приобретает вид окружности. 
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Рис. 4.6. Эллиптическая траектория 


В листинге 4.5 представлены определения двух функций, задающих движение 
по эллипсу. Функция еШрзеО является функцией инициализации движения, 
а по\еО — функция, передаваемая методу зеИщегуаЮ. 


Листинг 4.5. Определения двух функций, задающих движение по эллипсу 
ГапсНоп е1Ш1рзе(х1А, а!рва, а, Б, отеза, х0, уУ0, те. { 
/* Движение по эллипсу 
Параметры: 
х1а - 14 движущегося объекта, строка 
а1рБа - угол поворота эллипса, град. 
х0 - х-координата центра эллипса, пикселы 
уУ0 - у-координата центра эллипса, пикселы 
а - большая полуось эллипса, пикселы 
р - малая полуось эллипса, пикселы 
отеда - угловая скорость, град/с; знак задает направление вращения 
261ще - начальная фаза, град. 

ЧЕ - временная задержка, с 
*/ 


// проверка наличия параметров: 
1Е (]а1рьа) а1рва = 0 

ТЕ (!а1) а = 0 

1 (1) ьЬ=о 

И ощеза) отега = 0 

И ; 50) >= 

| ; 50 У=оО 

Ш (27ще) 7ите = 0 

Ш (а 4 =о0 


уаг { = -7 те /* чтобы начальное значение было 0, 
поскольку в шоуе() уже есть приращение */ 
5е штегуа | ("шоуе ('" + ха + ",„" + ара + ","+ач"," + БВ" "+ 
отега +", " + х0 + ", "+ уб +", "+ пише + " "++ ")", 
71те*1000) /’‘многократный вызов тоуеО с интервалом яите, мс */ 


ГапсНоп шоуе(х19, ава, а, 6, омега, х0, у0, тите, ©) 
* пересчет координат, 
вызывается из е1Ш1р5е О 


+ 


продолжение 


2000 === Глава4. Примеры сценариев 


Листинг 4.5 (продолжение) 


Н= 1#те 
/* х,у - координаты ‘в собственной системе координат 
уаг х а*МаеН.соз ( (ошеда*Е + @%)*МаЕВ.РТ/180) 


уаг у = Б*МаеВ.з1п ( (ощеда*Е + 4Е) *МаЕВ.РТ/180) 
уаг аз = МаёВ.з1п (а1рва*Маёв.РТ/180) 

уаг ас = МаеНн.сов (а1рна*МаЕВ.РТ/180) 
1осииепе.а11 [х14] .з6у1е.бор = -х*аз + у*ас + У0 
осимепе.а11 [х14] . з6у1е. 1еЁ% = х*хас+ у’аз + х0 
} 


Ниже приведен НТМГ-код, содержащий сценарий, который загружает два изоб- 
ражения и заставляет их двигаться по эллиптическим траекториям: 
«НТМ! > 
<5СВТРТ> 
РапсИоп е11рзе(х14, а! рва, а. 5, отега, х0, уУ0, химе,в® { 
о // код определения функции 
} 
1 
Гапс оп шоуе(х14, а!рва, а, 6, отега, х0, у0, тише, а { 
Е // код определения функции 


уаг хзбг = 'ММС Ш = "пу" 58С = "р1с1.491Е"><ТМб ТО = "пу2" 
"р!с+2 . 914" >' 

доситеп{. миг {1е(х51г) 

е111рзе("му1",. 60, 100, 30, 10, 170, 300, 0.2, 0) 

е111рзе ("шу2",. 80, 100, 130, 30,140, 300, 0.2, 0) 

</ЗСВТРТ> 

</НТМЬ> 


Если сохранить код с определением функций е ре и тоуеО в файле, например 
еШрзе.]5, то рассмотренный выше НТМГ-код можно переписать в следующем виде: 


<НТМ1_> 

<$СВИРТ $ВС = "е|П1рзе. ]$"></$СВИРТ> 

<ЗСНРТ> 

уаг хзЕг = '<ТМСТО = "пу1" 5ВС = "р1сЕ1. 91 ЕЁ 'ХТМб 10 = "му1" 58С = 
"р1сЕ1.91Е">' 


досимепе. иг1 Ее (хзЕг) 

е111рзеСс'шу1", 60, 100, 30. 10, 170, 300, 0.2, 0) 
е111рзе("шу2", 80, 100, 130, 30,140, 300, 0.2, 0) 
</5СВТРТ> 

</НтТмГ> 


Движение по произвольной кривой 


Рассмотрим задачу организации движения видимого элемента по произвольной 
кривой, заданной выражением с одной переменной. Точнее, мы хотим указать 
функции движения в качестве параметров не одно, адва выражения, которые опи- 
сывают изменения вертикальной и горизонтальной координат элемента. Эти вы- 
ражения будут содержать одну переменную, которую мы обозначим через х — 
строчной латинской буквой. Переменную х можно интерпретировать как незави- 
симый параметр движения (например, время). С помощью встроенной функции 
еуаЮ можно вычислить значения этих выражений при конкретном значении пе- 
ременной х и присвоить их параметрам [ей и {ор таблицы стилей перемещаемого 
элемента. Функция (пусть это будет тоуеО), которая все это выполняет, переда- 
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ется в качестве первого параметра методу зе тщегуаЮ, который периодически 
вызывает ее через заданный интервал времени. 


Итак, функция инициализации движения сшуетоуеО будет принимать три стро- 
ковых и один числовой параметр. Строковые параметры содержат соответствен- 
но значение идентификатора Ш перемещаемого элемента, выражение для верти- 
кальной координаты и выражение для горизонтальной координаты. Числовой 
параметр определяет период времени, через который координаты элемента пере- 
считываются. Ниже приводятся определения функций сигуетоуеО и тоуе(): 
ТипсНоп сигуетоуе(х!а, уехрг, хехрг, 2Ите) { 
/* Движение по произвольной кривой. Версия 0. 
Параметры: 
х19 - 14 движущегося объекта, строка 
уехрг - выражение для вертикальной координаты 
хехрг - выражение для горизонтальной координаты 
7те - интервал времени между вызовами функции тоуе(), мс 


*/ 
Ш (11а) тегаго поИ 
И (уехрг) уехрг = "х" 
Ш (хехрг) хехрг = "х" 
И Иже) хате = 10 // интервал времени, мс 
х=0 /* глобальная переменная, 
входящая в выражения уехрг и хехрг */ 
5е пеегуа | ("шоуе('" + х14 + "', '”-+ уехрг + " + хехрг + ""''’) 
7ите) 


} 


РапсИоп шоуе(х, уехрг, хехрг) { 


хЕ+ 
осимепе.а11 [х14] .з6у1е.6ор = е\уа1 (уехрг) 
осимепе .а11 [х1а] .з6у1е.1еЕЁ = еуа1 (хехрг) 


} 
Обратите внимание, что переменная х в функции сигуетоуе() является глобаль- 
ной и поэтому доступна в функции тоуе(). Чтобы сделать переменную х глобаль- 
ной, мы просто не использовали ключевое слово уаг перед первым ее появлением 
в коде. 


Исходное позиционирование перемещаемого элемента с помощью таблицы сти- 
лей не играет особой роли, поскольку при вызове функции сигуетоуеО элемент 
помещается в точку с координатами, равными значениям выражений хехрг и уехрг, 
вычисленным при х = 0. Поэтому начальное позиционирование следует задавать 
с помощью соответствующего выбора этих выражений. Ниже приведен при- 
мер НТМГ- документа с движущимся изображением: 

<«НТМЕ> 

МС Ш = "тушие" $ВС = "р1с И." ЗТИЕ = "роз оп: аб5о ие" > 

<5СКРТ> 

ГапсНоп сигуешоуе(х!4, уехрг, хехрг, 7те) { 


// код определения функции 
} 


Рапсйоп тоуе(х!А, уехрг, хехрг) { // код определения функции 
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сигуетомеС'тутоа" , "100 + 50*Ма . $т(0. 03*х)", "50+х", 100) 

</5СВТРТ> 

</НТМЕ> 
В этом примере изображение будет перемещаться по синусоиде с амплитудой 
50 пикселов и горизонтальной скоростью 10 пикселов в секунду. Начальные ко- 
ординаты графического объекта равны 100 и 50 пикселов по вертикали и гори- 
зонтали соответственно. 


В рассмотренных выше функциях сигуетоуе О и тоуеО в выражениях, описываю- 
щих движение, в качестве аргумента можно использовать только символ х. Ниже 
приведены модификации этих функций, позволяющие использовать произволь- 
ные имена для аргумента, лишь бы они не совпадали с уже применяемыми для 
других целей: 


Рапсйоп сигуешоуе(х!19, уехрг, хехрг, 7 те, патеуаг) { 
/* Движение по произвольной кривой. Версия 1. 


Параметры: 

х1@ - 14 движущегося объекта, строка 

уехрг - выражение для вертикальной координаты 

хехрг - выражение для горизонтальной координаты 

7ите - интервал времени между вызовами функции шоуе(), мс 


патеуаг - имя аргумента в выражениях уехрг и хехрг 


1 (1х14) геаги поИ 
1 Оуехрг) уехрг = 
и Охехрг) хехрг = 


нон 


ну" 
х 


И (и те) хате = 10 интервал времени, мс 

И патеуаг) патеуаг = "“х" 

еуа! (патеуаг + "= 0") * глобальная переменная, входящая 
в выражения уехрг и хехрг */ 

е! поуе ( + х!а + '- уехрг + ' "+ хехрг + ", 

патеуаг + " ‚ ите) 


ЮпсНоп тоуе(ха, уехрг, хехрг, патеуаг) { 
еуа!(патеуаг + "++") 

итепё . а11[х19]. $ У1е.ёор = еуа1(уехрг) 
| шепё. а| [х19]. $ у1е.1еЁё = еуа1(хехрг) 


Суть модификации кода заключается в том, что имя аргумента теперь передается 
функциям в качестве строкового параметра патеуаг. Чтобы создать переменную 
с именем, указанным в значении переменной патеуаг, и присвоить ей некоторое 
значение, необходимо создать строку с оператором присвоения и передать ее функ- 
ции еуа!(. Теперь можно использовать, например, такие вызовы функции: 
сигуетоуеС 'ту!то|[”, "100 + 100*Матй. $11(0.05*м)/(0. 05* м)" "50+", 50, “м") 
сигуетоме ("ту!то2", "100+ 2* те)", "570 - име", 100,"м") 
Обратите особое внимание на использованный выше прием создания перемен- 
ной. Сначала имя этой переменной сохраняется в виде строкового значения в дру- 
гой переменной, затем она используется при генерации строки, содержащей не- 
которое выражение. Далее строка с выражением передается в качестве параметра 
функции еуаЮ, которая выполняет данное выражение. Этот прием лежит в осно- 
ве создания программ, которые пишут программы. 
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4.2.2. Перемещение мышью 


Рассмотрим задачу перемещения видимых элементов НТМГ-документа с по- 
мощью мыши. Такими элементами могут быть графические объекты, кнопки, тек- 
стовые области, таблицы, плавающие фреймы и др. Здесь мы займемся переме- 
щением изображений, текстовых областей и плавающих фреймов. 


Перемещение графических объектов 


Перемещать мышью изображения можно различными способами. Изучим один 
из них: пользователь пытается перетащить мышью изображение; затем он должен 
отпустить кнопку мыши и переместить указатель в нужное место (при этом он 
может удерживать или не удерживать кнопку мыши в нажатом положении); оста- 
новившись в нужном месте, пользователь отпускает кнопку мыши или щелкает 
ею, чтобы прекратить перемещение изображения. В листинге 4.6 приведен код, 
реализующий этот алгоритм. 


Листинг4.6. Код перемещения изображения мышью 


«нтм1 > 
<НЕАО><Т1Т1_Е>Перемещаемое изображение</Т1"|_Е></НЕАО> 
<ВОбу а = “тубоау"> 


Ма 10=“туйта” ЗНС = ‘р!с+. 911 опагадз{таг{ = “"агадО " чу е = 
"роз {!опт:абзо!и{е; 10р:10; 1ем:10“"> 

</ВОБУ> 

<ЗСНРТ> 

Нах = #а15е // нельзя перемещать 

уаг 14 ние = " 


РпсНоп агаз() { 
На = пе 


1а_1т9 = еуепе.зксЕ1етере.1а 


} 


ТипсНоп тубоду.оптоизето\уе() { 

# Са) // если можно перемещать 
Чоситепт{.аП [1А_1тад] . уе .+ор=еуепт{+.сПеп+У\У 

доситепЕ. а [19_1т2$].51у1е.1еЁё = еуепё. с 1епЕ Х 


ТипсНоп тубоду .оптоизеиро { 
Нах = Ёа5е // нельзя перемещать 


} 
< 
</нтме> 


Здесь функция 4га?О, обрабатывающая событие опагахзаг (попытка перетаски- 
вания), устанавливает переменную-триггер Йа и выясняет, кто инициатор собы- 
тия. Значение переменной Йаз позволяет определить, можно или нельзя переме- 
щать элемент. В данном примере инициатором события может быть только один 
элемент, но мы готовимся к более общему случаю нескольких перемещаемых эле- 
ментов. Этот случай будет рассмотрен позже. Обратите внимание, что события 
оптоизетоуе (перемещениеуказателя мыши) иоптоизеир (кнопка мыши отпу- 
щена) получает не изображение, а объект тела документа тубоду. Мы не исполь- 
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зовали событие опсИскК для изображения, зарезервировав его для других целей, 
например для перехода по ссылке. Заметьте также, что в функции туБоду. 
оптоизетоуе() при обращении к объекту изображения его идентификатор пере- 
дается через переменную 14_!1. Поэтому мы используем запись доситет.а1А_ит$], 
а не Чосатеш.аПлАлие. 


Теперь рассмотрим более сложную задачу, используя для ее решения приемы, 
применявшиеся ранее. Пусть документ содержит несколько графических объек- 
тов, которые можно перемещать мышью. В нашем случае это изображения парус- 
ников. Все множество кораблей разбито на две эскадры: ту (моя) и о{Пег (чужая). 
Визуально они отличаются лишь ориентацией кораблей и флагом. Размер кораб- 
ля зависит от значения его вертикальной координаты {ор: чем ее значение боль- 
ше, тем больше размеры рисунка. Таким способом мы создаем эффект перспекти- 
вы (ближе-дальше). Чем ниже расположено изображение, тем больше его размеры. 
Далее, если к какому-нибудь кораблю приблизились на достаточное расстояние 
чужие корабли в достаточном количестве, то какой-то из них погибает (становит- 
ся невидимым). Для решения, какой из сблизившихся кораблей должен погиб- 
нуть, используется жребий (датчик случайных чисел Ма@.гапдот()). Это — про- 
тотип алгоритма некоторой игры типа «Морской бой» (рис. 4.7). Впрочем, нам 
важен не сюжет игры, а приемы программирования. 


ШСЛМоид<жчменгыи5\перемещенненТМ - Мс 
Фзйд;. „Правда“ Ёвд... Избранное;, С5>е“8$ рфаека ;« 
4 > 3 2 х * -, ид х- 24 №! Глькыиц 
| 
А 
| 
4 
а 
‚ . <=> | 
| } 
ый ол | 
Е | 
Готово Зи Мой компьютер 
— — 


Рис. 4.7. Игра «Морской бой» 


В рассматриваемом примере используются два графических файла с изображе- 
нием кораблей: один для своих ($11р1.211), а другой — для чужих ($61р2.21{). 
В НТМЕГ-документе можно расположить необходимое количество графических 
элементов с помощью тегов, написав их вручную: 


МС 10 = "ту\" $ВС = "зп!р!.9!!" опагадзфагЕ = “аб!с1О0" УМЕ = 
"роз! {оп :абзо!и{е; {ор:10;1е1{:10; мБ у: м $16 1е"> 
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«Ме 10 = "ту2" 5АС = "5ВЕр!.91!" опагадзфаг = "аБ1с1 () "ЭТМЕ = 
"розЦ!оп: аб5о[\{е; {0ор:10; 1еН:10; м5 БЕ у : м5 Ые"> 


<М@ 10 = "о{пег|" 5АС = "5112.91!" опагадз{фаг = "а61с10" ЗМЕ = 
"роз! Ноп : абзо{е; {0р:10; 1еН:10; уз БЕ И у : 51 е"> 

<Мс 10 = "о{Пег2" 5ВС="5Н!р2.49Н" опагад${аг{ =" 961с1()" ЗТУИЕ = 
"роз! Ноп: абзо[и{е; {0ор:10; [еН:10; м 516: Ту : м! $1 е"> 


Однако проще создать сценарий, выполняющий это автоматически. Начальные ко- 
ординаты кораблей зададим с помощью генератора случайных чисел (листинг 4.7). 


Листинг 4.7. Код сценария для игры «Морской бой» 


<НТМЬ> 
<НЕАО><ТПЕЕПеремещаемые изображения</Т1Т1Е></НЕАО> 


<ВООУ 19="тубоду"  раскдгоипа="Ыие.9"></ВОБУ> 


<СВРТ» 

уаг 1мдзЕт="" // строка тегов, формирующих рисунки 
уаг Мпу=3 // количество своих 

уаг МоЕВег=3 // количество чужих 


/* Формирование изображений */ 

Рог (1 =1; 1 <= Му; 1++) { 

1119861+=  '<ТМбТО="шу +1 + гс="$Н1р1. #1" опдгарзфаг4="агар()' 

з6у1е="роз1Е1оп:абзо1и6е ; Бор: ' + 200*МаЕв . гапдош() + ';1еЁё:' + 
200*МаЕв.гапаомс) + ' ;\18151116у:\18151е"> ' 

} 

Рюг (1 = 1; 1 <= МоёВег; 1++){ 

11996х+= ' <1Мб ТО="обВег' +1+ '" 3:0="861р2.91Ё" опагадзвагЕ="агад ()" 

з6у1е="роз11оп : аБзо1ие; вор: ' + 200*МаЕВ.гапаош() + ';1еёЁ:' + 
200*МаеН . гапдомо0 + ' ;\1 811 11 6у : У1 81 0]е"> ' 


аоситепг. мгтте (1мЕ5тг ) 
" // запись в документ 


тез17е0 // установка размеров изображений 
уаг Еад = Ра1зе 
уаг 19 Ла = "" 


ЕопсЕ1оп @хкад() 

{ . 

Над = ТЁ1ад 

19_1тв _ емеп гсЕ\етепт, 1 // 14а элемента, который надо перемещать 


} 


РЕорсё1топ шуБо@у. оппочветоуео{ 


1 (Рад) { 
Чосимепе.а11[19_1п9}.з6у1е.кор = еуепе.с11епЕУ 
Чосимепе.а11[1Аа_1п9].з6у1е.1еЁЕЕ = еуепе.с11епЕХ 
тез17е0 // установка размеров изображений 


ТипсНоп тубоду. оптоизечро { 
Над = Та!5е 
асНоп() // действия в создавшемся положении 


ВЮпсНоп асйоп( { // действия 
уаг $, ХО, у,. Хр, У|, У, №2, №3. Хх, Ч, 2 продолжение ‚5 
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Листинг 4.7 (иродолжение) 
уаг ашиг = 20, зпйа =2 /* минимальн 


КОП! 
Гог (1 = 0; 1 < 4осишепЕ. 1пазе$. 1е12% 
$=0 
х0 = ракзе1пе (Яосимере. 1падез[1].з6у1е. 1еЕ®) 
У0 = рагзе1 те (аосомепте. 1мадез[1].з6у1е. вор) 


ое расстояние и 


у ЧИиЖИ 


Рог ( )=0; ] < досатере .1мадез.1епаев; ]++) { 
У1 = аосомере. 1мадез [1].36у1е.\у1$101116у == "\у1з11е" 
\2 = аосомепе . 1падез!)] . з6у1е.у15101116у == "\у1з11е" 
х1а = даосимепе. 1мадез [1].1а.зоюзЕхСсо,2) 
у1а = аосимепЕ . лтадез []] .1а. забзеЕг (0,2) 
У3 = х1а. 1оса1еСотраге (у1а) != 0 // чужой 

ТЕ ((1 1= 7) &5у1&&У2&&У3) { 


х1 = рагзе1 те (Чосамете. 1мадез [3].з6у1е. 1еЕЁ®) 
У1 = рагзе1 пе (Чосимере. 1тадез [5] .зеуТе. вор) 
а = МабВ. зак ( (х0 - х1)*(х0 - х1) + (0 -У!1)*(у0 -У1)) 


1Е (а <= ад) э+ // очень близко 
1Е (3 >= этах) { 
1Е (МаЕв.гапаом()<0.5) # = 1 // кто погибнет 
езе 2 = 3 
ФосишептЕ. 1тазе$ [7] . (уе. уз 16 Шу = "Б1Аа4еп" 
БгеаКк 
РапсИоп ге$12е(){ // установка размеров изображений 


уаг у, зе 

Гог (1 = 0; 1 < 940сишетё. 1щазе$ . 1еп2 8; 1++){ 
у = рагзе|пЕ (досишепЕ. 1тазез [1] .зёу1е. бор) 
$17е = Ма. шщ(х, 180) 
$12е = Маёй.шах($12е, 15) 
Чосимепе . 1тадез[1] .зеу1е.м1аЕВ = в12е 
Чоспмепе. 1лмадез [1]. з6у1е. Беларе = 0.8*517е 


} 


} 
</З5СВТРТ> 


</НТМЬ> 

Как нетрудно заметить, главная часть семантики игры обслуживается функцией 
'сбопО . Вы можете пофантазировать и изменить ее по своему усмотрению. Я же 
обратил внимание на пространственные свойства театра военных действий. В на- 
шем случае не исключены ситуации, когда кораблик, расположенный выше (зна- 
чит, дальше), накрывает кораблик, расположенный ниже (значит, находится на 
переднем плане). Иначе говоря, наш способ создания эффекта перспективы пло- 
хо работает в случае перекрытия изображений. Поправить это можно путем изме- 
нения параметра 7-Т№ех стилей элементов в функции гез17е(), поставив это свой- 
ство в прямую зависимость от значения вертикальной координаты {ор. Элемент 
с большим индексом будет находиться над элементом с меньшим индексом. Мо- 
дифицированный код функции гезиеО выглядит следующим образом: 


РпсНоп  тгезше () { 
уагу, $17е 
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Тог (1 =0; | < аоситепф. тадез . 1епой; ++){ 
у = рагзет{(аоситеп{+.1таде$[1].${уе {ор) 
зе = Ма.тт(у, 180) 

512е = Ма{.тах($12е, 15) 


оситепт. 1тадез$ [1]. з4у!е. мта{ий = зе 
Чоситеп+. 1тадез [1]. з1у!е. Негапт = 0.8*$12е 
Фоситеп{.г таде$[1].$1у!е.21паех = х 


| 
7 
\ 
й 


Обратите внимание, как в Лауа5спре происходит обращение к свойству 7-ш4ех 
таблицы стилей. 


Перемещение текстовых областей 


В листинге 4.8 приводится пример НТМГ-документа, в котором можно переме- 
щать текстовые области, созданные с помощью тегов <ТЕХТАКЕА>. При этом разме- 
ры области и шрифта текста определяются в ней в зависимости от значения вер- 
тикальной координаты. Так создается эффект перспективы (ближе-дальше). Чем 
выше, тем дальше, и наоборот (рис. 4.8). Чтобы приблизить к себе текстовую об- 
ласть, необходимо просто переместить ее вниз. Вы можете «сложить в стопку» 
текстовые области, удалить их от себя или, наоборот, приблизить так, чтобы текст 
стал разборчивым. В отличие от примера с изображениями, здесь разрешение на 
перемещение происходит по двойному щелчку на текстовой области. Обратите 
внимание на то, как в функции гез12еех{О определяется элемент, размеры кото- 
рого следует изменить. 


Фала Правки по избранное Сервис  Гправка } +1 
бевлки ” 
то - парик ®]| 
зе 54 
: Это - второй 2] 
—1 текст 
Это - третий Л 
текст 
| 
1 
14%] Голода 53 Мой компьютер м 


Рис. 4.8. Перемещаемые текстовые области 


Листинг 4.8. Перемещение текстовых областей, созданных с помощью тегов <ТЕХТАВЕА> 


ТМ 
<ИТИЕ? 


<НЕАО><Т1Т1Е>Перемещаемые текстовые собласти</Т1Т1Е></НЕАО> 


<ВОГУ 1а="тубоау" Баскагоипа="6 ие." > они 
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Листинг 4.8 (подолжение) 


<ТЕХТАВЕА 10="61" ор@Ъ1с11ск=""агад()" ЗТМЕ = "роз11оп:арзо1щ%е; 
Сор:10; 1еЁё:10;Еоп-812е:1ахде">ЗТо - первый гекст</ТЕХТАКЕА 

<ТЕХТАВЕА 10="2" оп9Ъ1с11ск=""агад()" ЭТМЕ = "роз1Е1оп:аЪзо1ие; 
бор:100; 1е11:150“”2910 - жорой текст</ТЕМА ЕХТАКЕА 

<ТЕХТАВЕА1 Т0="Е3" опаЪ1с11ск=""агад()" 5ТУЕ = "роз1Е1оп:аЪзо1ие; 
6ор:150.: 182853)" >Э - третий ТекСсТ</ТЕ)ХТАВЕА> 

</ВОБУ> 

<ЭСВТРТ> 

гез12ееехе () // установка размеров текстовых 


// областей 
уаг Е]ад = Ёа1зе 
уаг 19а = "" 


Еосе10оп @гад() 


1 

аа = Еад 

19_119 = еуепё.згсЕ1ещепе.1а4 // 1 элемента, который надо 
перемещать 

1 

Рапсйоп шуфоду . оптоизетоуе () { 

Ш (Яаё»Х 


досищепе . а11 [14_119] .зеу1е, сор = еуепё . с11епе У 
досишепе.а11 [14_1п9].з6у1е.1еЁЕ = еуепе. с11епех 
тез12есехЕ0 // установка размеров текстовых областей 


ТипсНоп тубоду. оптоизечро { 
Над = Та!зе 


РапсНоп гезмхеехЕ () { // установка размеров текстовых 
// областей 
уагу, $17е, 191149, 1аЕехе 
Рог (1 =0; 1 < досишепе . а11 . 1епаёВ; 1++) { 
1Е (осишепе.а11 [1] .ЕадМаше== ‘'ТЕХТАВЕА') { 
16ехе = аосишепе . а11[1].1а 
Уу = рагзе1т (осимеп*.а11 [1А6ехе].з6у1е. вор) 
812е = Маёь.ш1п(у, 800) 
$17е = МаеВ.пах (812е, 60) 
аосишепе . а11 [196ехё] . з6у1е.и1аеВ = $17 
Яосишепе.а11 [14%ехе] . зку1е.Ве1авеЕ = 0. 
аосимепе.а11 [196ехе] .з6у1е.21паех = у 
осимепе.а11 [1Ч%ехё].з6у1е.ЕопЕ512е = МафН.пах(2, у/10) 


3” 512е 


</ЗСВРТ> 
</НТМЕ> 

В принципе, ничто не мешает вам создать более сложный алгоритм для функции 

гез17{ех(() изменения размеров текстовой области. Например, можно дополни- 

тельно варьировать цвет фона и шрифта. 


Перемещение плавающих фреймов 


Если рассмотренный выше код немного модифицировать, то можно получить до- 
кумент со множеством перемещаемых плавающих фреймов, в которые загруже- 
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ны другие НТМТ-документы (рис. 4.9). Однако в этом случае возникает небольшая 
проблема: как передать плавающему фрейму сигнал, что мы собираемся его переме- 
щать. Дело в`том, что сигналы о нажатии кнопки мыши, щелчках и попытках перетас- 
кивания при наведении указателя мыши на фрейм получает не он, а элементы загру- 
женного в него документа. Я выбрал следующий способ решения данной задачи. 


О:\2ОМАЕУМ Ч ате_тауентМ-мМ - Мютозой мене Е хрюгое 


| Файл Прива Вмд Шрбраннсю Св 


[|572 29а 9199) 


Злесь привоцятся прос 
‚примеры использования 
некоторых возможностей 
вехторного графического В 
рерактара Мэстохлмца Рая ва 
сриентированяого на созда 


1. Сам срКе \Уеь-дюшир. 2ИЁт,, Н2с. 
$ Этно ЗмАСКИ ВеПОДЕ И? 41 Эта книга- популярное наложение основ создания \\еь-сайтов. 
картинка маскибуемото слс - е приемами У\е-дкзайка, разработать иопубликовать свой сайт.':, 
движется Рее сделано на Ве азн В приложении - справочникито Т$спрЕ и УВ5спрё. Прнв 
77 5 ЧИ модификациями) опубликованы этом сайте. 
ФАНОВ картинки на - 
: ы АспуеХ - элементы управления Например, поддержка базы дщ: 
. З5Ти АЗР - технологии использования серверных ресурсов в 
Наз|- векторный графический редактор, позволяющий создав; 
страницы. Во МазВ также МОЖНО делать интерактивные димами®Т 


2. Саш себе \№еБ мастер. 2001г., 211с. 
Динамический НТМГ, скрипты Примеры 


Рис. 4.9. В перемещаемые фреймы загружены страницы сайта 


Во-первых, рядом с каждым фреймом поместим маленькое изображение, которое» 
будет воспринимать событие, интерпретируемое как разрешение на перемещение 
фрейма. Я использовал изображение руки, расположенное около верхнего левого 
угла фрейма. Во-вторых, в функции изменения положения напишем код, кото- 
рый изменяет координаты, размеры и индекс фрейма, а также графического объ- 
екта. Таким образом, изображение будет получать событие, а обработчик этого 
события будет изменять параметры и изображения, и фрейма. 


Напомним, что плавающие фреймы создаются с помощью контейнерного тега 
<ЕКАМЕ>. В сценарии (листинг 4.9) мы сначала сформируем массив с адресами 
документов (файлов), загружаемых во фреймы. Затем сформируем строку тегов, 
описывающих фреймы и графические изображения, и запишем ее в НТМТ-доку- 
мент. Функция, производящая вычисление положения и размеров фреймов и изоб- 
ражений, в этом примере называется гезиейатеО. 
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Листинг 4.9. Код для перемещения плавающих фреймов 


<НТМЬ> 

<НЕАО><ТПЬЕ>Перемещаемые фреймьк/ПИТЕ.></НЕАВ> 
<ВОРУ 1 = "шубойу" БасКзгоипа = "ВБ ше." > 
</ВОГУ> 

<ЗСВТРТ» 

/* Массив адресов документов */ 

уаг айге!=пеу АггауО 


арге![0] = "эгарыс . Ви" 

абге! [1] = "ехатр!е$.В т" 

авге{[2] = "тубоок.П{т" 

/* Формирование строки с описанием фреймов и изображений */ 
уаг х$йг = ‘ 


Рог (1=0; 1‹ангеЁ.1епдеЬ;1++) { 

/* Фреймы */ 

х$(г+= '<«ТЕВАМЕ и196В=200 ТО="Ёг' + 1+ '" ВС = "! +аркеЕ [1] + ' 

ЭТУБЕ = "роз1100: абзо16е; фор:' + (5 +25*1) +'; 1еЁё:' + (10 + 30*1) 
+ 1></1Егаше>' 

/* Изображения */ 

х5Ег+= '<1Мб оп91с11ск="агад()" м19ЕВ=16 Пе100(=14 5ВС = "руКа.91Е" 


14="10' +1 + '" ЭТУЬЕ = "роз 10: аБзо1аее"> ' 
} 
аоситеп{.мгЦе (х$4{г) // запись в документ 


.Паз = Рае 
уаг 14 _ппё = 
ге$17еЁ тгатеО // установка размеров фреймов 


ГапсИоп — 4га5(){ 

Па=!Наз 

14 пп = еуепЕ.згс етепЕ. 14 

1 1т9 = "Н" + 149 19. зи6 5" (2) 
у" 


Еапсё1оп шуБоду. оппоивемотео { 

1Е (ад) { 
босимепе.а11 [14_19].з6у1е.бор= еуепё. с11епёУ 
босишепе.а11 [19119] .з6у1е.1еЁЕ = еуепе. с11епЕХ 
тез17еЁхамео 


Гапс(1оп шубойу . опшоизеирО { 


Над = Еа1зе 
АшпсНоп гезмхейгате()\{ // установка размеров фреймов 
уаг у. 5126е, 141тз, Чат 
Рог (Г =0; г < айгеЕ, |ешёёв; 1++) { 
/* Фреймы */ 
О Ы //1а фрейма 


у = рагзе1пе (досимете.а11 [1х] .з6у1е. ор) 
$17е = Маён.м1п (у, 800) 

$176 Маёв .шах(60,3127е) 

812е = 812е*3 
ФосишепЕ. а! 1 [19Ёг] 5 у!е. м1ЧЕН = 317е 
Фосишепё.а!1 [191г] „зу|е .Ве2йЕ = 0.8*517е 
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ФосишенЕ. а [1 [1аЁг|.з(у[е. 21 пех = у 
№ Изображения */ 
Тбие = "Ш +1 [114 изображения 
ФосименЕ. а 11 [1918 | оз у[е. ор = у-5 
досименЕ. а [1 [191 ще] оз6у1е. [её = 
рагзе[ п 1 (досименЕ. а11 [таг]. з(у|е.1еЁё)  -12 
ФосишенЕ. а [1 [191 ще] .5(у1е. 2 пдех=досишейе. а [19 г]. з1у[е. 71 пдех 
| 
</5СВТРТ> 
<НТМЕ> 


Обратите внимание, что перемещение фрейма приостанавливается, когда указа- 
тель мыши находится над фреймом. Поэтому для перемещения фрейма указатель 
мыши должен двигаться над участками окна, не занятыми фреймами. Это неболь- 
шое неудобство вызвано тем, что фрейм маскирует тело (элемент <ВОПУ>) доку- 
мента исходного окна и обработчик гпубоду.оптойзетоуе() не срабатывает. Ма- 
скирующий эффект появляется из-за того, что фрейм является разновидностью 
окна. В случае с текстовыми областями этот эффект не наблюдается, посколь- 
ку текстовая область — просто элемент документа текущего окна, а не отдель- 
ное окно. 


Мне кажется, что при надлежащем использовании техники перемещения тексто- 
вых областей, плавающих фреймов и других элементов (например, таблиц) мож- 
но разработать новый стиль дизайна НТМГ-документов (веб-страниц). Его суть 
заключается в создании псевдотрехмерного пространства, в которое погружены 
элементы документа. Эти элементы представлены в документе не ссылками, 
а своими уменьшенными копиями, расположенными где-то «вдали». Их всегда 
можно перетащить на передний план, чтобы их было лучше видно, или, наобо- 
рот, отдалить (отложить в долгий ящик). Иначе говоря, можно сделать доку- 
мент похожим не на газетный лист, а на ландшафт, наблюдаемый с высоты 
птичьего полета. 


4.3. Рисование линий 


В Тауа$сире нет специальных встроенных средств для рисования произвольных 
линий. Если вам потребуется отобразить в окне браузера прямоугольник или го- 
ризонтальную линию, то для этого можно воспользоваться НТМГ-тегами <ТАВ(.> 
и <НК> соответственно. А как быть, если нужны наклонная прямая, круг или кри- 
вая, заданная уравнением? Например, как изобразить график некоторой зависи- 
мости в виде кривой, а не последовательности столбиков? 


Идея решения этой задачи довольно проста. Нужно вывести на экран изображе- 
ние размером 1х1 пиксел, залитое цветом, отличающимся от цвета фона. Это изоб- 
ражение следует разместить несколько раз в соответствии с координатами, кото- 
рые задаются параметрами позиционирования {юр и 1ей атрибута ЗМЕ тега <МО>. 
С помощью сценария можно сформировать строку, содержащую теги <МОС> с не- 
обходимыми атрибутами, а затем записать ее в документ методом \гЦе(). 


В этом разделе мы рассмотрим сначала задачу рисования прямой линии, а затем — 
произвольной кривой, заданной выражением с одним аргументом. 
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4.3.1. Прямая линия 


Прежде всего выясним, как нарисовать точку. Из множества таких точек будет 
состоять любая кривая, которую нам нужно отобразить в окне браузера. В НТМЕ 
для этого можно использовать следующий тег: 
МО 5ВС = "роше.6 тр" ЗТИЕ = "роз! 1оп:абзо ие {ор:у ;1еЁ:х"> 

Здесь ро! 1{.Б тр — имя графического файла, содержащего один пиксел; у, х — чи- 
сла, указывающие положение графического файла в пикселах. Изображение точ- 
ки размером 1х1 пиксел можно создать в любом графическом редакторе. Из сооб- 
ражений экономии его лучше всего сохранить в файле формата ВМР, а не /РЕС или 
СТЕ (при малых размерах изображения алгоритмы сжатия неэффективны). 


Чтобы задать размеры отображения точки на экране, следует использовать атри- 
буты УМЮТН и НЕСНТ @щжарина и высота): 
<1Мб З8С = "рошШЕр. Бшр" ЭТУГЕ = "розг топ: аббо [и бе; бор: у; Пее:х" \ТОТН = 
п НЫОСНТ = п> 

Одинаковые значения атрибутов \МЮТН и НЕСНТ задают представление точки в ви- 
де квадрата размером пхп пикселов. При этом точка с исходными размерами 1х1 
пиксел просто растягивается. Таким образом, мы можем задать отображаемые 
размеры (масштаб) одной точки, а следовательно, и определить толщину линии. 


Теперь рассмотрим начальную версию функции, которая рисует прямую линию 
с заданными координатамих|, У1, х2, у2 ее начала и конца. Кроме координат функ- 
ция будет принимать числовой параметр п, указывающий толщину линии. Вот 
вариант определения функции: 

РапсНоп Ипе(х|!, у[, х2, у2, пу 

/* Версия 0 */ 

/* х|, У! - начало линии х2, у2 - конец линии п - толщина линии */ 


уаг сПпем1А = " УМОТН=" + п + "НЕСНТ=" + п /* строка для учета 
толщины */ 
уаг хуёг = "" // строка тегов для записи в НТМГ-документ 


уаг хгО = '+МО $5ВС="роши.Бтр" + сИпем1а + ' 
ЗТУГЕ="ро$1оп:абзодие; 
уаг К = (2 - У) /(х2 - х|) // коэффициент наклона линии 
уаг х = х| // начальное значение координаты х 
/* Формирование строки, содержащей теги <‹МОС. : 
уйПе (х <= х2) { 

хЕг += хо + ‘ор: + (1 + № (х - 2х1)) + 1 ее: +х + 

х+ + 


// запись в документ 
} 

Функция НиеО формирует строку, содержащую теги вывода экземпляров одного 
и того же графического изображения точки. При этом в цикле изменяются значе- 
ния параметров {юр и еЁ атрибута ЭТМЕ. Параметром цикла является горизон- 
тальная координата, текущее значение которой присваивается параметру 1. - Та- 
ким образом, мы используем горизонтальную развертку линии. Вертикальная 
координата ({ор) вычисляется с учетом ее наклона — коэффициента, равного тан- 
генсу угла наклона. Сформированная строка записывается в документ и отобра- 
жается в окне браузера. 
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Функция дает неплохие результаты, когда линия проходит слева направо под уг- 
лом к горизонтали, меньшим 45° (рис. 4.10). При больших углах становится за- 
метной дискретностьлинии, что показано на рисунке. Это связано с тем, что ко- 
личество отображаемых точек определяется величиной х2 - х|. Если мы хотим 
нарисовать вертикальную линию, то х2 = х| и, следовательно, количество отобра- 
жаемых точек равно 0. Иначе говоря, для создания вертикальных линий рассмат- 
риваемая версия функции Ппе() не приспособлена. Кроме того, эта функция ри- 
сует только линии, у которых начало находится левее и выше конца. 


‚ С х 


} Мой компьютер 


Рис. 4.10. Линии, нарисованные с помощью функции Ипе() версии О 


В следующей версии функции Ппе() реализована простая идея, заключающаяся 
в том, чтобы выбирать подходящую развертку. Если линия ближе к горизонтали, 
чем к вертикали, то используется горизонтальная развертка, в противном случае 
выбирается вертикальная развертка (рис. 4.11). Кроме того, мы определяем на- 
правление развертки так, чтобы рисовать линии, у которых начало может быть 
как левее, так и правее конца (листинг 4.10). 


Листинг 4.10. Код функции !теО версии 1 


Гапс оп Шпе(х|!, у, х2 ›„у2, п} 
/* Версия 1 */ 


/* х, У - начало линии 
х2, у2 - конец линии 
п - толщина линии 
Е! 
уаг сНпеущма = "* // строка, определяющая толщину линии 
и (п) 


сИпемтав = ' УМОТН=" + п + " НЕСНТ=" + п 
уаг х5{г : // строка тегов для записи в НТМЕ-документ 


продолжение & 
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Листинг 4.10 (продолжение) 
маг хз О = ‘<мМа@ $АС="роше тр" + сИпемла{п + * 
ЭТУЕЕ="ро$Шюп:абзо!ще;" 
уаг х, К, анест 


уаг м,егИса!| = Ма#.аб$(у2 - у1) > Май. а6$(х2 - х1) 
|  (уегЕса!)! 

Чтесе = (0 > у) // направление прямой 

х = У 

к = © - х1)/(у2 - У) // коэффициент наклона прямой 
}@зе{ 

Чтесё = © > х|) // направление прямой 


Ш (апес) х = х 
е1зех = х2 
Е бя // коэффициент наклона прямой 


ве (гие) { 
Ш (уегиса1){ 


хзёг += Юго + "ор: "+ (УГ + К*(х - х|)) + '; Пей: "+ х+'">' 
И (хх == х2) БгеаКк 
И (Чпесо  х+ 
е1зе х-- 
}е15е{ 
ХЕ = ГО + "ПеЕЕ, НЕЕ виа о 4 
# С == у) ыеак 
Ш (Аштесе) х++ 
е15е х-- 


] 
доситеп{.мгЦе (х${г) 


} 


// запись в документ 


Теперь не мешало бы получить возможность рисовать, например, штриховые ли- 
нии, а также задавать их цвет. Чтобы задать цвет ЛИНИИ, необходимо выбрать под- 


1 С:\Мои докчменты\Ипе.НТМ... РЕЗ 


Файл Празкз ма Избрачное =. 
ЭКО. * были” 


ЕРЖИИТОРЙлх и: т: 


Рис. 4.11. Линии, нарисованные с помощью функции теб версии 1 
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ходящий графический файл с изображением точки. Можно заранее заготовить 
файлы точек с различными цветами. Впрочем, можно заготовить файлы не толь- 
ко с изображениями точек, но и с произвольными изображениями. В конце кон- 
пов, мы можем рисовать «линии», используя любые изображения в качестве точек. 
Для рисования штриховых линий необходимо просто периодически не отобра- 
жать заданное количество точек. В следующей версии функции Ппе() добавлены 
два параметра: имя графического файла и длина штриха линии (листинг 4.11). 
Предполагается, что длины штриха и паузы между соседними штрихами одина- 
ковы. Если длина штриха не указана или равна 0, то линия сплошная. 


Листинг 4.11. Код функции пе() версии 2 (штриховые линии) 
ТипсНоп 11пе(руст_1Пе, х!, У|, хё, уд, п, $){ 
/< Версия 2 */ 
/* русЕ_ТПе - имя графического файла 
х1, У| - начало линии 
х2, у2 - конец линии 
п - толщина линии 


‚, $ - длина штриха и паузы 


И (!раеё_ Те) // файл с изображением точки 
р1сё Ре = "рошЕ.Бшр" 

и (5 // длина штриха и паузы 
$ =0 

уаг с Нпем а = "" // строка, определяющая толщину 

// линии 

# Ш // толщина 
сПпе\таЕв = " УЮТН=" + п + " НАСНТ=" + п 

уаг хуг = ' // строка тегов для записи в НТМЕ-локумент 

уаг х5О = '<1Мб 58С=" ‘+ русЕ_Ёе + "+ шеи + ' 


ЭТУЕЕ = "роз! 1оп: або ие; " 

уаг х, К, апем 

уаг уег(1са| = Май. а6$(у2 - У) > Ма!й.а55(х2 - Х|) 
Ш (уегаса!){ 


Чтесе = @ > У) // направление прямой 

х =У| 

К = (2—1) / (у251) // коэффициент наклона прямой 
}е15е{ 

тесе = ($ >х)|) // направление прямой 


1Е (тес) х = х1 
е1 зе х = х2 


К = \ - У) /(52 - |) // коэффициент наклона прямой 
Т 
уаг 1 = 0 // счетчик точек штриха и паузы 
уаг гам = (гие // рисовать или пропускать 


иВ11е (гие) { 
1Е (!уегса1) { 
1Е (хам) 
х5(г += х8бгО + 'б0ор:' + (У + К*(х - х1)) + !; 1е:' +тх+ 
1Е (х == х2) |хеак 
1Е (Ч1гесе) хн+ 


е1зе х-- 
}е15е{ 
И (гам) 


продолжение ®& 
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Листинг 4.11 (продолжение) 
Х5{г += х$4г0 + ем: + (+ В (- + бр х+ ">" 
й (х == у2) шеак 
й (Атест) х+ 
ее х-- 


Е ($>0&8&>$){ 
агами = 1агам 
| =О 


1 

аоситеп{.мгЦе(х1г) // запись в документ 

} 
Вторая версия функции П"еО позволяет не только рисовать сплошные и штрихо- 
вые прямые линии, но и располагать вдоль них изображения из графических фай- 
лов (рис. 4.12). В последнем случае линии не видны, они выполняют лишь роль 
направляющих для расположения изображений. Подбирая изображения и длину 
штриха, можно получить интересные визуальные эффекты. Однако не следует 
забывать, что при больших размерах графического файла и значительном коли- 
честве «точек» процесс отображения на экране может занять много времени. 


‚ "ЦСЛМои документы\11пе.НТМ - МисгозоНищегпе! Ехргег 


Файл Правка Вна Избран: СЫ бедаьа 


иона м-3 


3} Мой КОНАБЮТЕР 


Рис. 4.12. Расположение изображений вдоль прямых штриховых линий 
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4.3.2. Произвольная кривая 


А почему бы не создать функцию для рисования произвольных кривых, заданных 
некоторым выражением? На первый взгляд может показаться, что эта задача слож- 
нее, чем рисование прямых линий. Но это не так. При написании кода функции 
мы используем болыпую часть опыта, полученного при решении задачи рисова- 
ния прямых линий. Будем считать, что выражение, задающее кривую, содержит 
переменную, обозначенную строчной латинской буквой х. Тогда горизонтальная 
координата точки кривой вычисляется просто как значение переменной х, изме- 
няемой в заданных пределах. Для вычисления вертикальной координаты исполь- 
зуем функцию еуаЮ, которой передадим в качестве параметра строку, содержа- 
шую выражение (листинг 4.12). 


Функция сигуе() для рисования кривой будет принимать следующие параметры: 
имя графического файла с изображением точки (впрочем, это может быть любое 
изображение), выражение, задающее кривую, координаты началалинии, количе- 
ство точек линии, толщину линии и длину штриха (если потребуется штриховая 
линия) (рис. 4.13). 


Листинг 4.12. Код функции сиге()для рисования кривых 


ТипсНоп сигуе (руст_ТЕ Ге, уехрк, х0, УО0, 1, п. $){ 
/* Версия 0 */ 
/* р1сЕ_Ее - имя графического файла 
уехрг - выражение с переменной х 
х0, у0 - координаты начала кривой 
Е - количество точек кривой (значений переменной х) 
п - толщина линии 
$ - длина штриха и паузы 
* // 
1Е (1уехрг) тгебогп па 
1 ( 10166_Е11е) р16&_#Е11е = "ро1пё. Бр" 
Ш ($ з=0 
и @бе=о 
уаг сНпеула = ' 


и (п) 
спемтаЕв = 'УШТН=’ + п + 'НЕАСНТ=’ + п 
уаг х 
хугб = '<1М65КО"' + рисЕ_ Ее + "+ семга + 
' 5ТИЕ = "роз оп: абзо1ще; ор: ' 
ха = м" 
уаг 1 = 0, Чгаму = 1гче 
Гог(х = 0; х< в х++  { 
Ш (ага 
хз${г += х(гГО + (0 + еуа[(уехрг)) + '; Ле: + 60+» 
ЕО > 58 >20 { 
гам = Т@агам 


осишейе . иг1 Ее (хех) // запись в документ 
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'-1 СЛМон докаментыиБМте НТМ - Мкгозой Тше., ДИ] 
Файл Пра Вна Избранное Сервыс Справка |= | 


г аа 99: 


белки” 
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.) Мой компьютер 


Рис. 4.13. Линии, нарисованные с помощью функции сигуе0 версии О 


Ниже приведено несколько примеров: 


сигуе ("","200-0.01*х*х",1,100,200,3) // ветвь параболы 
сигуе ("","100.0* МаЕй. $11 (6/250*(х))",30,120,300,12,0) //  синусоида 
сигуе ("", "0.00 1*х*х* (х-75)", "х" ,100,80,200,6,0) 


Теперь модифицируем функцию сигуе() так, чтобы можно было рисовать замкну- 
тыелинии (например, окружность или эллипс). Для этого необходимо иметь воз- 
можность задавать выражение не только для вертикальной, но и горизонтальной 
координаты. Такой способ задания линии в математике называют параметриче- 
ским. В простейшем случае в качестве выражения для горизонтальной координа- 
ты можно задать как "х" (листинг 4.13). Тогда функция должна давать такой же 
результат, что и ее версия 0. Напомним, что в выражениях для координат точек 
линии переменная должна быть обозначена строчной латинской буквой х. 


Листинг4.13. Модифицированный код функции симеб 
РпсИоп сигуе(р1сё_Ше, 


уехрг, хехрг, › о УО, т, п, $ 
/* Версия 1 */ 
р1сг_ 111е - имя графического файла 
уехрг - выражение с переменной х для вертикальной координаты 
хехрг 


- выражение с переменной х для горизонтальной координаты 
УО - координаты начала кривой 


{ - количество точек кривой 
п - толщина линии 
$ - длина штриха и паузы 


(значений переменной х| 


1(. (уехрг) гетаги паП 
Н г хехрг; хехрг = "х" 


И (Г рсЕ_ Ге) раеё_ГИе = "рошЕ. в шр" 
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# (15) з=0 

и) т=оО 

уаг сИпемуа{й = 

и (т) 

сНпемлат =  ММОТН= + п + "'НЕСНТ=' + п 

уаг х 

Х56г0 = '<1Мб 5КС=" ' + рисЕ те + *" + сИтемай + 


ЭТУЕЕ="ро$юопгабзо!и{е; {ор:' 
хи = "" 
уаг 1 = 0, агам = иче 
Юг(х = 0; х< © х{ 
Ш (Чагам) 
х${г += х${4г0 + (0 + еуа[(уехрг)) + '; Пет!:‘ + (0+ 
еуа!(хехрг)) + '">' 
И (Г > 588 >20) { 


гам = 1агам 
| =0 
} 
44+ 
} 
доситепЕ . иг ее (х5Ег) // запись в документ 
} 

Ниже приводятся несколько примеров так называемых фигур Лиссажу (рис. 4.14): 
сигуе ("", "80*Ма{1.31т(6/25*х)", "60*Ма{й. соз(6/25*х+1)" ‚250, 100,300,2 ,0) 
сигуе ("", "60*МатН. 511 (6/25*х)", "60*Ма!. соз(6/25*х)", 100, 70, 300,2 ‚0) 
сигуе ("", "80*Ма{й. $11(6/25*х)", "80* Ма .со$ (6/50*х)" ,100,200,600,6,0) 
сигуе ("", "80*Ма{й.$11(6/250*х)", "80*Ма{и. соз(6/75*х)",310,250 ‚400,2 ,0) 


Е. С: бонлеаения м5 МН НТМ - анк. | РА 3 


Рис. 4.14. Фигуры Лиссажу, нарисованные с помощью функции ‘сигмеб версии 1 
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Фигуры Лиссажу получаются, если выражения для координат представляют собой 
синус и косинус некоторого выражения с переменной х. Наиболее интересные кри- 
вые возникают, когда коэффициенты при переменной являются кратными друг другу. 


Вместо изображения точки можно использовать любой другой рисунок. Подби- 
рая графические файлы, вид кривой и длину штриха, можно получить интерес- 
ные визуальные эффекты (рис. 4.15). Эти эффекты могут быть особенно впечат- 
ляющими, если использовать анимационные С!Е-файлы. Однако помните, что 
при больших размерах графического файла и многочисленности рисунков про- 
цесс их отображения на экране может занять много времени. 


: Файл Правка Вид Избранное Сервис Гправка 


; ча ам -а 


№ ‚& 

<“ #1 оф 
Ив. ‹ у 
..— ч 
Мор 


] Готово 9] Мой компьютер 


Рис. 4.15. Расположение рисунков вдоль фигур Лиссажу 


4.3.3. Графики зависимостей, 
заданных выражениями 


В принципе, у нас почти все готово, чтобы нарисовать график функции одной 
переменной в прямоугольной системе координат. Мы уже рассмотрели в преды- 
дущих подразделах, как рисуются кривые, заданные выражением с одной пере- 
менной, а также прямые линии, необходимые для отображения осей координат. 
Теперь все это нужно собрать воедино. 


Казалось бы, достаточно просто нарисовать две перпендикулярные прямые (оси 
координат), а затем кривую. Однако здесь возникают дополнительные задачи. 
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Во-первых, необходимо решить, как пересекаются координатные оси: какие квад- 
ранты они образуют и сколько. Во-вторых, требуется определить длину каждой 
из осей, которая, очевидно, зависит от максимального и минимального значений 
выражения, описывающего кривую. Наконец, следует задать способ оцифровки 
осей. Код программы, решающей эти задачи, получается значительно объемнее, 
чем код, обеспечивающий собственно рисованиелиний. Попробуйте написать его 
самостоятельно в качестве упражнения. В результате вы получите функцию, с по- 
мощью которой сможете рисовать графики различных зависимостей. Не забудь- 
те при этом, что выше мы рассматривали отображение линий в экранной системе 
координат, в которой вертикальная ось направлена сверху вниз. В обычной прак- 
тике рисования графиков вертикальную ось направляют, наоборот, снизу вверх. 


4.3.4. Графики зависимостей, 
заданных массивами 


Как известно, зависимости между двумя величинами можно задавать в виде таб- 
лиц, состоящих из двух столбцов, в одном из которых располагаются данные, со- 
ответствующие аргументу зависимости, а в другом — ее значению. Аргументы 
отображаются на графике вдоль горизонтальной оси, а значения — вдоль верти- 
кальной оси координат. Собственно зависимость обычно представляется либо 
точками на координатной плоскости, либо ломаной линией, проходящей через 
эти точки, либо вертикальными прямыми (столбиками). Возможны, конечно, 
и другие способы графического представления данных (например, в виде круго- 
вой диаграммы). Здесь мы остановимся на задаче построения графиков в прямо- 
угольной системе координат в виде ломаной линии. 


Таблицы с данными можно представить с помощью одного двухмерного или двух 
одномерных массивов. Будем считать, что имеем дело с двумя одномерными мас- 
сивами, в одном из которых содержатся аргументы, а во втором — значения зави- 
симости. Например, в одном массиве содержатся даты, а в другом — соответству- 
ющие этим датам среднесуточные (или какие-нибудь другие) значения темпера- 
туры. Кривую зависимости между температурой и датой можно представить как 
ломаную линию, состоящую из отрезков прямыхлиний. 


Легко догадаться, что для построения графика зависимости между элементами 
двух массивов в виде ломаной линии можно просто организовать в цикле вызов 
рассмотренной ранее функции ШпеО. При этом следует заранее определить рас- 
стояние в пикселах между соседними точками по горизонтальной оси. Возникает 
задача масштабирования — перевода значений элементов массивов в пикселы эк- 
ранных координат. 


Прежде чем рассмотреть пример построения графика, немного модифицируем 
функцию Ипе(О. Эта функция в том виде, как она была определена в подразделе 
«Прямая линия», не совсем подходит для наших целей. Сделаем так, чтобы она 
просто возвращала строку тегов, описывающую линию, а не записывала ее в до- 
кумент. Для этого необходимо в определении функции Ппе() заменить строку 
доситепе.\тКе(х$(г) на гефагп хе. 


В листинге 4.14 приводится код сценария, отображающего в окне браузера гра- 
фик зависимости, заданной с помощью двух массивов (рис. 4.16). 
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Ирилуте Ирля 
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Рис. 4.16. График зависимости, заданной с помощью двух массивов 


Листинг 4.14. Код сценария, отображающего в окне браузера график зависимости, заданной 
с помощью двух массивов 

<5СНРТ> 
/* График зависимости, заданной массивами */ 
/* Массив элементов горизонтальной оси */ 
уаг аХ = пем Аггау("Один", "Два", "Три", 
/ Массив элементов вертикальной оси */ 
уаг аУ = пемАггауд, 15, 13, 4, 8, 6) 


"Четыре", "Пять", "Шесть") 


уаг Ку = 10, к = 60 // коэффициенты масштабирования 
уаг х0 = 100, УО = 20 // отступы 

уаг хзёг = "" // строка тегов, описывающая линию 
Гог(1 0; 1 < ах. еп? -1; 1++) { // линия графика 


х1 = х0 + Кх*1 
= У0 - Ку»а\У[1] 
х0 + Кх*(Е + 1) 
у2 = У0 - Ку*аУ[п1 + П 
хзи+= Ипе("“р_,.]рё", х1, У, х2, У2, 4) 


р 
[®) 
| 
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Рок (1=0; 1 < + 

/* Метки на вертикальной оси */ 

х56:+= "‹Ь з6у1е='роз1Е1оп:абзо1 ие; вор: "+ (у0-1*30- 

10) +"; 1еЕ6: 75 > "+1 3+" < /Ь>" 

Е (1>0) { 
// горизонтальные линии: 
х{г+= Ипе("рошЕ.Бшр", х0, у0 - 1*30, х0 + 5*Кх, у0 - 1*30, 1, 2) 
// вертикальные линии: 
х5(г+= ИНие("ро!тЕ.Вшр ", х0 + Кх*:, У0, х0 + Кх, 50, 1, 2) 


у а на горизонтальной оси */ 


х${1+= "<Ь з{у[е='роз от: абзо| ие: {ор: " + (0 + 5) + "Ием:”"+ (0 + 
Кх*Г) +'">" + 

ах[!] + "</Б>" 

} 

х${+= Ппе(“"рот+.6тр " ‚х0,у0,хО, 50, 2) // вертикальная ось 

х$1г+= Ппе(“ропЕ. отр ",х0,у0,х0 + 5*Кх,у0,2) // горизонтальная ось 

Чоситепт. мгЦе (х${г) // запись в документ 

</ЗСЁВРТ> 


В этом сценарии масштабирование не универсально, а выбрано вручную на осно- 
ве анализа конкретных исходных данных. Однако можно написать более универ- 
сальный код, автоматически формирующий масштабирующие коэффициенты на 
основе программного анализа исходных данных и (или) параметров, указанных 
пользователем. Попробуйте написать такой сценарий в качестве упражнения. 


4.3.5. Динамические линии 


Допустим, требуется время от времени перерисовывать линии. Например, если 
стрелка на изображении циферблата часов создается с помощью сценария на ос- 
нове функции Ипе(), то для создания эффекта движения необходимо удалить ра- 
нее нарисованную стрелку и создать новую, положение которой соответствует 
текущему времени. В другом случае может потребоваться перерисовать график 
некой зависимости (например, курса валют от даты) при динамическом обновле- 
нии данных. Иначе говоря, в общем случае перерисовывание линии состоит из 
удаления ранее нарисованного ее изображения и создания новой линии. 
Рассмотренные выше коды функций пе О и сигуе() не вполне приспособлены к ре- 
шению этой задачи из-за того, что они выполняют запись в документ сгенериро- 
ванной строки НТМГ-тегов. Вообще говоря, это делать совсем не обязательно. 
Вполне достаточно, чтобы функции Ппе() и сигуеО просто возвращали строку те- 
гов, а записать ее в НТМТ-документ можно и во внешней программе. В той же 
программе мы можем удалить и всю совокупность тегов, формирующих линию 
(когда это понадобится). 


Итак, прежде всего изменим определения функций ПпеО и сигуе() следующим 
образом: заменим в них выражение 4доситепе.утйе(х$г) на геигп хяг. В результате 
функции не будуг ничего рисовать, а будут лишь создавать и возвращать данные 
для последующего рисования. Теперь, чтобы нарисовать произвольную линию, 
следует в сценарии написать такую строку кода: 


оситепЕ.утИе(сигуе(параметры)) 
Очевидно, вместо одной этой строки можно записать следующие две: 
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уаг хзЕг = сигуе (параметры) 
аосчмепе .мх1 ее (хзег) 


Поскольку мы должны быть готовы удалить линию из документа, строку тегов, 
возвращаемую функциями сигуе О и Ппе(), сначала заключим в какой-нибудь кон- 


тейнер, например <ПОУ Ш =...> сатрибутом ТО, а затем запишем в документ: 
уаг сстуситме=“"<0М 10 = 'тусигуе" 1- сигуе(параметры) + "</01\>" 
доситепт. мгКе (стусигуе) // запись в документ 


Чтобы удалить линию из документа, достаточно заменить содержимое контей- 
нерного тега <ОТУ> на пустую строку: 


аоситепЕ.а11 .шусиакуе .1ппекНТМЬ = "" 


Здесь мы воспользовались свойством шипегНТМГ, которое содержит весь НТМТ- 
код, заключенный в указанный контейнер. Присвоение этому свойству нового 
значения сразу же изменяет соответствующий элемент в документе. В данном 
случае вся последовательность тегов ЗМС ...>, формирующая линию, заменяется 
пустой строкой, в результате чего изображениелинии исчезает. При этом сам кон- 
тейнер <ПТУ> с пустым содержимым остается. В случае необходимости его можно 
наполнить новыми данными. Это типичный прием динамического изменения эле- 
ментов НТМГ-документов. 


Чтобы вместо предыдущей линии нарисовать новую, достаточно записать в сце- 
нарии следующий код: 
аосишепе .а11.шусиакуе .1ппекНТМГ = сигуе (другие_параметры) 


В результате контейнер <ПМ\> заполнится последовательностью тегов МС. ..> 
формирующих новую линию, а браузер ее отображает. 


2 


В качестве примера, позволяющего убедиться, что все это работает, я предлагаю 
следующий сценарий (листинг 4.15). 


Листинг 4.15. Код динамических линий 


<ВОТТОМ опс СК = "гедгам/п ">Перерисовать</В11ТТОМ> 
<5СНРТ> 


/* Строка, возвращаемая сигуе() заключается в контейнер с заданным 
идентификатором 10 */ 


уаг стусигуе="< ГМ 12 = 'тусигуе'>> " + сигуе( "809*Махп 6/25*х) 
"80*Ма{И.со$(6/50*х)",100,200,600,6,0) + "</0ИМ>" 
ситепт , игтте ‹ гуе) // запись в документ и отображение линии 


/* Определения функций */ 


Агам/О { /* обработчик щелчка на кнопке 
(перерисовка линии) */ 
аоситеп{.аП.тусигуе. ппегНТМЕ = сигуе("", "60*Ма\й.5т(6/25*х)", 
"60* Ман. соз(6/25’х)" ,100,150,300,2,0) 
} 
Еапсе1оп Гугуе (р1с*_#11е, уехрг, хехрг, х0, у0, Е, п, $5){ // линия 
1Е (1уехрг) гебогп па11 
1Е (Тхехрг) хехрг = "х" 
1Е  (1!101с6_Е1е) р1с6_Е11е = "ро1п.Бир" 


ТЕ (1!) $=0 
ТЕ (16) Е =0 
уаг с11пемтаЕВ = "" 
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и (п) 
сНпемлай = \МОТН= + п + 'НЕСНТ= + п 
\аг х 
х5%гб = ТМ 58С=" + р!сЕ ТНе + *"" '+ сИтема{й + ' УМЕ = 
"розЦюп:абзо|ще;{ор: * 
хз = "" 
уаг 1 = 0, гам = 1гие 
Рог(х =0; х < Е; х++) { 
Ш (гам) 
х${г += х5НО + (0 + ема!(уехрг)) + '; ПетЕ:' + (0 + ема! (хехрг)) 
+'“>' 
1Е (Г >; && $ >20) { 
гам = гам 
Г=Э 
} 
тебаги хзбг // строка тегов, формирующих линию 
} 
</5СВТРТ> 
</НТМЕ> 


При загрузке данного НТМТ-документа в окне браузера появляется кнопка и не- 
которая фигура Лиссажу. Щелчок на кнопке заменяет эту фигуру окружностью. 
Повторный щелчок уже не приводит к видимым изменениям, поскольку текущее 
изображение заменяется таким же. 


4.4. Напишем число словами 


При создании различного рода финансовых документов (например, платежных 
поручений) обычно возникает неоходимость представить числа прописью. Суть 
этой задачи заключается в том, чтобы преобразовать заданное число в строку, раз- 
бить ее на группы разрядов числа (единицы, десятки, сотни, тысячи ит. д.), про- 
анализировать содержимое каждой группы и перевести его в некоторое слово. 
Специфика задачи заключается в выборе нужных окончаний этих слов, то есть 
в учете падежа, рода и числа имен существительных и числительных русского язы- 
ка. Поясним это на следующем примере: 

31 — тридцать один 

31000 - тридцать одна тысяча 

31000000 - тридцать один миллион 
Многим программистам когда-то приходилось решать эту задачу. Однако в боль- 
шинстве случаев, по моим наблюдениям, они ограничивались лишь именитель- 
ным падежом и единственным числом, предоставляя пользователю самостоятель- 
но скорректировать отображаемое число прописью с помощью клавиатуры. Так 
в свое время поступал и я, полагая, что учет окончаний имен числительных слиш- 
ком сложное (или рутинное) дело. В конце концов я взял карандаш и бумагу и ра- 
зобрал все возможные случаи. Оказалось, что их не так уж и много. В результате 
я написал код, который приводится влистинге 4.16.Я и сам удивился, что он ока- 
зался небольшим. Возможно, кое-что можно было бы сделать изящнее. Однако 
сама идея программы представляется мне вполне красивой. 
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Функция №ау(М№), решающая рассматриваемую задачу, принимает в качестве па- 
раметра М целое число и возвращает строку, которая представляет это число в ви- 
де последовательности слов. Эта функция использует ряд вспомогательных функ- 
ций: зреакКО, ТейО и К!00. Если зреаКО является специфической функцией, 
предназначенной для решения поставленной задачи, то функции 1еО и ВЮ 
довольно универсальны и могут быть использованы в других приложениях. Так, 
функция ГеВО возвращает левую часть указанной строки, а К12 (О — правую ее 
часть. В принципе, можно обойтись и без этих функций, но с ними как-то удоб- 
нее. В представленном ниже варианте функция №ауО позволяет представить про- 
писью любое целое число, не превышающее 999 999 999 999 (один триллион ми- 
нус единица). 


Листинг 4.16. Код для представления числа словами 


Гипсттоп  Мзау(М) { // Перевод чисел в имена числительные 
/* Параметр: целое число 
Возвращает строку символов 
7 
Ш (М == пы) 
гетигп " 
и (М) 
геигп “ноль" 
Е (Маш.абз(М№) > 999999999999) 


геи  "****" // превышение допустимого предела 

маг ММ = "", ММ = "". № = "", МИ = "", помМмМ, пММ№2, пмМЗ, пмМА, 7пак. 
ху7 

/^ Единицы */ 

еЧ = пем Аггау(" один", " два", “ три", " четыре", " пять", " шесть", 
" семь", " восемь", “ девять“) 

/* Десятки */ 

Че = пем Аггау(" десять", ” двадцать", " тридцать”, сорок", 

пятьдесят", " шестьдесят", " семьдесят", " восемьдесят", " девяносто“) 


/* Второй десяток */ 
Ча = пем Аггау(" одиннадцать", " двенадцать", " тринадцать", 


четырнадцати пятнадцать", " шестнадцать", " семнадцать", 
" восемнадцать", "девятнадцать") 
/ Сотни 7 
$0 = пем Аггау(" сто", " двести", “" триста", “” четыреста", " пятьсот“, 
" шест семьсот", восемьсот", “ девятьсот") 
пак = " // знак числа 


" 


И (М < 0) гпак-”минус 
/* преобразуем число М в строку 

с ведущими нулями: */ 
ММ = В!281("000000000000"” + гм (М. о б1г11 50). 12) 
/* Выделяем группы разрядов, преобразуя их в числа. 
Второй параметр функции рагзе|п{О, равный 10, здесь важен, поскольку 
группы разрядов могут содержать ведущие нули, что может быть расценено 
как 8-е число 


пмМ[ = рагзе!п+(тен(мМм,3), 1 
п№№2 = рагзе!п{(ММ.зи6$+г (3,3 
пМ№3 = рагзе!п{(ММ.зи65$4г (6,3 
пММА = рагзе!п+(ММ. зи $1г (9,3 


0) 

), 10) 
), 10) 
), 10) 


4.4 


Напишем число словами 


И (пмм->0. ){ 

ММГ =зреак(и ММП) 

ху = ВАне(ммМ, 0 

ММ! = ММ + " миллиард" 

1Е (хуй == "а" || хух == 
ММ! = ММ! + "а" 

е15е < 
1Е (хуй !="Н") 
ММ! = ММ + "ОВ" 


и" || хух == "е") 


и @м№ > 0) 
ММ№ = зреаКк(иММ2) 
ху = К121Е(ММ2,1) 
МО = №2 + " миллион" 
1Е (хуй == "а" || хух == 
ММ2 = ММ2 + "а" 
е1зе { 
1Е (хуй !="Н") 
ММ = №№ + "ОВ" 


" 


и" || худ == "е") 


и Ом > 0) 
е9[0] = " одна" 
еа[1] = "две" 
ММЗ = зреаКк(и ММЗ) 
ху7 = К! 1(ММЗ,1) 
МЗ = МЗ + " тысяч" 
1 (хух — "и" ||‘хух = "е") 
ММ = №3 + "и" 
е15е { 
Ш Суд =="а") 
ММЗ = ММ + "а" 
т 
е4[С] = " один" 
еа[1] = "два" 


} 
и @мм > 0 
№4 = зреаК(иМ М4) 


М тпак + ММ + №2 + №3 + М4 
тегиги М4 ? "ноль" : ММ 


/* Вспомогательные функции : */ 
ЕорсЕ1оп реак (К) { 
уак УМ1, ум№2 
ТЕ (К == 0) 
гебаги "" 
ЗЕ (® == 10) 
хевиги. десять” 
ТЕ К = 1 && К < 190) 
гесикп еа(к-1] 
ТЕ (® >= 11 && К <20) 
геигп ак - Ш 
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Листинг 4.16 (продолжение) 
1 (К >= 20 &к <= 99) { 
ск = Ииг!м (К. 10590) 
УМ! = рагзет (Г е(ск, 1)) 
у№2 = рагзепЕ( ск. зи зи (1, 1)) 
тегиги  У\2==0 ? ае[ум1-| : 4е[умМ - | + еа[у\2-П 


} 
ТЕ (К >= 100 & к <= 999) { 
к = Иим(К. 105110) 
тебагио зо [рагзетие (цеё*(Кк,1)) -1] + зреаКк(рагзе1те (К. заЪзег (1, 2))) 


Еарсе1оп ТЕг1и(хзег) { // удаляет передние пробелы 
ЗЕ '@ $ %г . 1пдехОТ (” ") == 0)) 

тебаха хех 
уаг азёг = хзег.вр11 6 (" 
уахк 1 = 0 
м011е (1‹азег.1епдаЕВ) { 


// создаем массив из слов строки 


1Е (азбх[1] 1!= ("")) 
ргеак /! выходим из цикла, если элемент не пуст 
у 
азЕг = азбг . 811се(1) // создаем массив 
тесиги азёг.]о11(" ") // склеиваем элементы массива в строку 
Ропсе1оп еее (хзех, п){ // выделяет левую часть строки 


тебоги хз г.заЪзек(0, п) 


| 
Гопсйоп ВИ Ехя, п) { // выделяет правую часть строки 
териги хг. 5 ит (хуг.1еп2 - п) 


Ниже приведен НТМГ-код со сценарием, использующим функцию №250. В окне 
браузера представляется поле ввода данных (рис. 4.17). Если ввести в это поле 
некоторое число и щелкнуть кнопкой мыши где-нибудь вне его, то это число ото- 
бразится в виде соответствующей последовательности слов. 


‚ЦОЛКнига Уамаэсирргоба\/АУ Мт’,_ Миса 4 + 18 =] х| 
Файл Щавка. '.$?7& Избранное Сьрвис - Справка %# 
933 Щи "эм -уВах 
| 
| 


Введите число: 


1? 145578901 ) 


зисло прописью: 
сто двадцать три миллиарда четырест“ "‘апятьлесяг шесть 
миллионов семьсот восемьдесят девять тысяч двенадцать 


а 


Чи ) 
в г Готе*8 53 Мой комльютер 


Рис. 4.17. Представление введенного числа прописью 
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НТМ! 

<ВОБУ 62со1о = "е0еОе0"> 

Введите число:<ВВ> 

<ПМРОТ ММЕ = "шушри" ТУРЕ = "питбег" УАПШОЕ = ""” опспапве - 
"“питрбегспапдеО"> 

<ВА> Число прописью:<ВН> 

<В № = "№ехе"></В> 

 /ВОБУ> 

<«УСНРТ> 

Типс оп питБЬегсвапдеОо{ 

аоситеп+{.а!1. Мех{. ппегТех{=М$ау(Ааоситеп{.а!. ту {при{.уа!ие) 


</ЗСВТРТ> 
<АтмЕ> 


4.5. Обработка данных форм 


Такие элементы НТМГ-документа, как поля ввода данных, текстовые области, 
переключатели и флажки, раскрывающиеся списки и кнопки, можно объединить 
в так называемую форму (рис. 4.18). В НТМЕ форма создается с помощью кон- 
тейнерного тега <НОЕМ>, внутри которого располагаются теги элементов этой фор- 
мы. В объектной модели документа каждой форме соответствует свой объект, вхо- 
дящий в коллекцию оги1$. Заметим, что любой из перечисленных выше элементов 
можно использовать вне всякой формы. Однако форма — не просто контейнер, 
а контейнер и объект, предназначенные главным образом для организации отправ- 
ки на сервер всех данных, имеющихся в элементах этой формы (например, вве- 
денных пользователем). Давным-давно, когда браузеры воспринимали только про- 
стой НТМЕГ и не работали со сценариями, форма была единственным средством 
поддержки интерактивности. 


'ЦСЛМомдок9ментышШ\Ч>орма.Мт -Мсго$оЯ 1пте!... 8] 


Г ка Правка Вид Избранное Сервис Справка" || 
> 973 ааа” Се" ес 


в |; Отправить" 


5] Готова о | а] мойкомльютер 


Рис. 4.18. Внешний вид формы в окне браузера 


Как раньше, так и теперь для отправки данных на сервер сценарий не обязателен. 
Чтобы отправить данные, достаточно в теге <НОВМ> указать атрибут АСПОМ, а в са- 
мой форме установить кнопкутипа Зибти. Щелчок на этой кнопке инициализи- 
рует отправку данных. Если атрибут АСПОМ не указан или его значение пусто, 
данные формы не будут отправлены, даже если вы щелкнете на кнопке типа Зибти. 
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Итак, для отправки данных формы атрибут АСПОМ должен иметь некоторое зна- 
чение. В общем случае это ОВГ-адрес файла или ССС]-программы, которая по- 
лучает и обрабатывает отправленные данные. Например, АСПО М =" Бир://м\м\м. тузегуег/ 
с1/тургоэтат.р!". 
Если вы хотите отправлять данные формы по электронной почте, то значением 
АСПОМ является строка вида: 
ша! то:адрес_е-тат1 
Можно также указать тему (зиБ]есР) сообщения: 
тащо:аЙрес_е-тай.?зиЦес!=ТеМа_сооб«еННЯ 
Кроме атрибута АСПОМ в теге <НОЕКМ> следует указать еще два атрибута: МЕГНОР 
и ЕМСИМРЕ Атрибут МЕГНОО имеет значение РОБТ или ОЕГ. Выбор значения отража- 
ется лишь на форме, в которой передаются данные. Если у вас нет особых причин 
задуматься об этом, выбирайте значение РОТ. Атрибуту ЕХСГМУРЕ присвойте значе- 
ние "{ех(/р1аш". В этом случае отправляемое сообщение будет представлять собой 
последовательность пар вида имя_элемента=значение. Здесь имя элемента — значе- 
ние атрибута МАМЕ в теге элемента, содержащегося в форме, а значение — значе- 
ние атрибута МАШЕ в этом же теге. Если не указать атрибут ЕМСГМРЕ, то сообщение 
будет представлено в неудобочитаемом (закодированном) виде. 


Вот пример НТМГ-документа с формой, содержащей поле ввода данных и кноп- 
ку типа Зибти: 


<НТМЕ> 

<РОВМ МЕТНОО = РОЗТ АСТОЮМ = “таШо:ти{Пи@дега$ 1 т.ги” 
ЕМСТУРЕ="Кехё /р1а1п"> 

<МРУТ МАМЕ = "Сообщение" ТУРЕ = “{1ех+” УАШУЕ = “"> 

МРОТ МАМЕ = “Отправить” ТУРЕ="“зи6т ” УАГОЕ = “Отправить“"> 

</ЕОВМ> 

<ИНТМЕ> 


Отправка данных рассмотренной выше формы произойдет при щелчке на кнопке 
типа Зибти, на которой в нашем примере выводится надпись «Отправить». Адрес 
получателя указан как значение атрибута АСПОМ в теге <НОКМ>. 


Если перед отправкой данных формы требуется предварительно их проверить или 
еще что-нибудь сделать, то для этого необходим сценарий. В следующем примере 
проверяется, имеется ли символ < @ » в поле ввода адреса электронной почты по- 
лучателя и не пусто ли поле ввода собственно сообщения. Если символа «@» в ад- 
ресе нет или поле сообщения пусто, то отправка не производится. Сценарий обра- 
батывает событие опзибти, возникающее при щелчке на кнопке типа Зиб ти. 


<НТМЕ> 

<РОВМ 12 = “туюгт” МЕТНОБЕРОЗТ АСТ.ОМ=“”" ЕМСТУРЕ=“"4+ех*/р!ат” 
$1У1е="Баскдгоипа:'еЭеОе0'"> 

Кому: 

<[МРОТ МАМЕ = "етаЙ_0" ТУРЕ = "{ехё" УАГОЕ = ""> 

<р> 

От кого: 

<1МРОИТ МАМЕ="ешаЙ {тош" ТУРЕ = "{ех!" УАЦОЕ = ""> 


<Р> 

Сообщение:<ВВ> 

<ТЕХТАВЕА МАМЕ = "Сообщение" ТУРЕ = "{ехё" УАЦПОЕ = " </ТЕХТАК 
<Р> 

<! Кнопка типа Зифшй > 


4.5. Обработка данных форм 231 


<ТМРОТ МАМЕ = "Отправить" ТУРЕ = "ваЪи1е" УАГОЕ = "Отправить"> 
</ЕОВМ> 
<ЭСВТРТ> 
Боосе1ор шуЕоги.опвиЬи1е (){ 
уаг поеша11 = пуЁЕоги.еша11 6о.уа1е.1пдехоЕ('@') == - 1 
/* присваиваем 
значение 


равенства */ 
уаг побехё = ТмуЕоги. Сообщение .уа]ще 


уаг хбехЕ = "ХиЦисьмо не отправлено" 
1Е (поеша1] || побехе){ 

еуепё.гебиги\Уа1ие = Ёа15е // отменить 
отправку 


1Е  (0оета11) 
а!ег( ("Неправильный адрес получателя" + жех() 


е1зе 
а!ег(("НеТ текста сообщения" + хех) 
} е!5е 
мутогт. асс1топ = "та1110: " + шуЮюгт.етаЙ_ф0.уаше // значение АСПОМ 
) 
</ЗСЕТРТ» 
</НТМЕ> 


З} 0:\Книгаауаб сир риоа\Форма.Вл -.. ВАЕТЕЗ 
|| Фэйл Празка Вид Избранное сер > О 
а а > АЕ. 2% ЛЕ Ы 


Аи —— 


Кому: оФуууум | 


Откого. а а@\мМ\Мм. ГИ 


Сообщение: 


У А жаре Фа Е 
Привет ! т 


3 


| 
| 
| 
: 


Я Иа 
| '’ Отправить" “| 


| у 


в | Готов О. Мой компьютер 


Рис. 4.19. Форма отправки сообщения по электронной почте 


Если отправить данные формы, показанной на рис. 4.19, то адресат получит сооб- 
щение в следующем виде: 


ета!_{о=ххх@уууу.ги 

ета! _4гот=ааа@\/л\м\лм\м.ги 

Сообщение=Привет 

Отправить=0тправить 
В приведенном выше примере мы делаем поверхностную проверку данных, вве- 
денных пользователем в форму. Если данные не удовлетворяют нашему крите- 
рию правильности, то мы должны предотвратить их отправку. Это можно сделать 
двумя способами. Первый способ заключается в присвоении свойству геаги\Уаше 
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значения Ё#[е (как в нашем примере). Тогда отменяется стандартная реакция на 
событие, в данном случае — реакция на событие опзибтй (отправка сообщения). 
Второй способ заключается в присвоении свойству асИоп пустого значения. 
В нашем примере значение асйоп пусто по умолчанию, поэтому выражение 
еуепЕ.геитгпУаше = Ибе-является излишним, но зато делает код сценария более 
понятным. В контексте нашего НТМГ-кода сценарий мог бы выглядеть и следу- 
ющим образом: 


<5СНРТ> 

ТипсНоп туогт.опзибтй() { 

уаг поетаЙ = туогт.етай {о.уаше.таехОК`) == - 
уаг по{ех{ = ‘шуютиа „Сообщение ‚уаше 

уаг х{ех{ = "ХиПисьмо не отправлено" 

Ш (@юешай || поехо { 


Ш (поетаШ) 
аег(("Неправильный адрес получателя" + х{ех() 


е1зе 
аецщС"Нет текста сообщения" + жех{) 
} езе 
пуюгт. асНоп = "таЖо:”" + ту опт. ета! |_{0. маме // значение АСПОМ 
 ЗСАРТ> 


На веб-страницах нередко размещают ссылку или кнопку, открывающую форму 
отправки сообщения по электронной почте автору страницы (рис. 4.20). В этом 
случае не нужно вводить почтовый адрес получателя. Очевидно, что этот адрес 
уже присвоен в качестве значения атрибуту АСПОМ в теге <НОВМ>. Если вы хотите 
затруднить его выявление отправителем сообщения или, что важнее, различны- 
ми программами-роботами, сканирующими веб-страницы с целью выявления ад- 
ресов электронной почты, то следует предпринять некоторые меры. Самый про- 
стой рецепт — хранить отдельные компоненты адреса в различных переменных 
и собирать их с помощью выражения конкатенации (склейки), которое присваи- 
вается свойству асйоп. В результате программа-робот не найдет в НТМГ-доку- 


Файл. Правка Вид Избранное гр | 


От  авка почты автору 


. } 1 
1-9 } 


Откого:} 


Сообщение: 


] Гото _Ж Мойч^мйьютер;"! 


Рис. 4.20. Форма отправки сообщения по электронной почте автору веб-страницы 
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менте строки символов, имеющей структуру адреса электронной почты. Ниже при- 


водится пример НТМГ-кода, воплощающий эту нехитрую идею. 


<НТМЕ> 

<ЕОВМ ТР = "муЕоги" МЕТНОО=РО5Т АСТТОМ=" " ЕМСТУРЕ="6ех® /р1а1п" 
зЕу1е="раскагоцпа: 'е0е0ео' "> 

<Н2>Отправка почты автору</Н2> 


От кого: 

«ТМРОТ МАМЕ="еща11 Ехгош" ТУРЕ = "бехё" УАГОЕ = ""> 

<Р> 

Сообщение : <ВВ> 

<ТЕХТАВЕА МАМЕ = "Сообщение" ТУРЕ = "{ех!" УАШОЕ = " "></ТЕХТАКЕА> 
<Р> 

<! Кнопка типа бабе > 

<ТМРОТ МАМЕ = "Отправить" ТУРЕ = "зори" УАБОЕ = "Отправить"> 
</ЕОВМ> 

<ЭСВТРТ> 

уаг Е1г3Е = "имама" , зесопа = "дегаз1м" 


Босбоп шуЕогт.опвириле () { 
1Е (ТиуЕоги.Сообщение.уа1ме) { 


еуепе .гебигпУа1иё = Га1<е // отменить отправку 
а1егё ("Нет текста сообщения ХиПисьмо не отправлено") 
) е1зе 
шуГогш. асов = "ша о: " + ЗЕ + о + бесп + "го" 
// значение АСПОМ 
| 
</ЗСКРТ> 
</НТМГ> 


Приведем еще один вариант привязки сценария обработки данных формы. Функ- 


ционально он аналогичен рассмотренному выше. 


«НТМЕ> 
<ЕОВМ Ш = "туюгт" МЕТНОР = РОЗТ АСТОМ="" ЕМСТУРЕ=“ Тех /р1а1т” 
опзиби1е = "гебоги уа119акохО"" з6у1е ="Ъаскагочиа: 'е0е0ео' "> 


<Н2>Отправка почты автору</Н2> 


От кого: 

<1МРОТ МАМЕ="епа11 гов" ТУРЕ = "бехё" УАГОЕ = "">. 

<Р> 

Сообщение : <ВВ> 

<ТЕХТАВЕА МАМЕ = "Сообщение" ТУРЕ = "{ех!" УАГОЕ = '" "></ТЕХТАВЕА> 
<р> 

<! Кнопка типа 551 > 

<ТМРОТ МАМЕ = "Отправить" ТУРЕ = "заб" УАГОЕ = "Отправить"> 
</ЕОВМ> 

<ЭСВТРТ> 

уаг Ё1гз{ = "имити", зесоп@ = "зегазит" 


РапсНоп уаНдаог0{ 
И (Итугогт.Сообщение.маше  { 
а[ег{("НеТ текста сообщения Лисы не отправлено") 


теиги Ёа1зе // отменить отправку 


} е|5е р 
мутогм. асе1оп = "та11 то: "+ Рут "№" + чесоп@ + ".га" 
// значение АСТТОМ 


тебоги = Егае // разрешить отправку 


} 
</5СВТРТ> 
</НТМЬ> 
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В этом примерефунцияуаПааогО является обработчиком события опзибий и воз- 
вращает либо {гие, либо Ё#5е в зависимости от того, можно отправлять данные 
или нет. В теге <РОКМ> к событию опзабтй привязывается выражение геиги 
уа!Аавог(, что эквивалентно присвоению значения свойству еуепетецитУаше в теле 
функции-обработчика события. 


4.6. Меню 


4.6.1. Раскрывающийся список 


Простейшее меню можно создать с помощью тегов <ЗЕЕСТ> и <ОРПОМ»>. Обычно 
такие конструкции называют раскрывающимися списками. Ниже приводится 
простейший пример использования раскрывающегося списка (рис. 4.21). В этом 
примере раскрывающийся список задается НТМГ-кодом, а обработка выбора из 
этого списка — сценарием. Задача сценария заключается просто в обработке но- 
мера выбранного элемента из списка. В примере это вывод окна с соответствую- 
щим сообщением. Выбор пользователя из раскрывающегося списка производится 
щелчком левой кнопкой мыши на элементе списка. При этом свойство 5@есведтдех 
объекта элемента документа, соответствующего тегу <ЗЕТЕСТ>, приобретает в ка- 
честве своего значения номер выбранного элемента списка (нумерация начинает- 
ся с 0). Для инициации обработки выбора пользователя здесь служит событие 
опсрапее (произошло изменение в выделении элемента списка). Обработка этого 
события осуществляется функцией шуз@есйопО. Начальное выделение и ото- 
бражение элемента в раскрывающемся списке задается атрибутом ЗНВСТЕО тега 
<ОРПОМ>. В рассматриваемом примере в списке виден элемент «Физика». 


Правка Вид Избранное ‹Сервие: Справка 


№ 


Выберите экзамен, который хотите сдать: [Физика __ -} 
Математика 
| | Физика 

| Биология 


| Химия 


$; Гатово < Мойковасыюнюю 


\ 
Рис. 4.21. Раскрывающийся список 


<НТМЕ> 
Выберите экзамен, который хотите сдать: 
<5ЕГЕСТ МАМЕ="ТЕ$Т" опсвапзе ="тузе\еси1 оп () 
<ОРТЮМ>Математика 
<ОРТОМ ЗЕЕСТЕО>4>МЗМКа 
<ОРТЮМ>Биология 
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<ОРТЮМ>Химия 
</ЗЕЪЕСТ> 
<ЭСНРТ> 
ТипсНоп тузеесНоп() { 
\уаг {ез{пате, {езпитьЬег; 
1езпитьег = ЧоситепЕ.а 1.ТЕЗТ .зе1есе41пАех 


# (Чезбпиштьег == 0) 
1е5птате="МаТ . анализ" 
е!зе{ 
# (Цезтпитьбег == 1) 
1езпате="КВаНТОВаа физика^ 
е!$е{ 
# (Чезпитьег == 2) 
1е{пате="Биология" 
е!5е 


1езтате = "Органическая химия" 


} 

а!ещс'ВЫ будете сдавать: 

> 

</5СЕТРТ> 

<НТМГ> 
По умолчанию в раскрывающемся списке виден только один элемент. Чтобы 
раскрывающийся список сразу был приоткрытым (показывал несколько элементов), 
следует в теге <ЗЕПНСТ> указать атрибут УХЕ = количество видимых элементов (рис. 4.22). 


` {езпате) 


.. 3; ОЛКнига/ама$сйр\ргоба\расКр_спМСОК.пт - М!сгозой иметеё Ехр!ой _ 


Фзял Правка Вид Избранное Сервис’ Справка || 
авс ЭВ" ааа 
ет * т 
Биология й 
Выберите экзамен, который хотите сдать: (Химия т 


4] Готово | {2} Мезконпеклер | 


Рис. 4.22. Раскрывающийся список, в котором видны сразу три элемента 


Пользуясь регулярностью НТМГ-кода, задающего раскрывающийся список, не- 
трудно сгенерировать его с помощью сценария (листинг 4.17). 


Листинг 4.17. Код сценария раскрывающегося списка 


<НТМЬ> 

Выберите экзамен, который хотите сдать: 

<ЗСВТРТ> 

уаг М зе = // номер элемента, выбранного по умолчанию 
уаг аорНопз= пех АгауО // массив элементов списка 

аорНопз[0] = "Математика" 


аорНоп$ [1] = "Физика" продолжение *& 
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Листинг 4.17 (иродолжение) 


аорНоп$[2] = "Биология" 

аорНоп$[3] = "Химия" 

/* Строка, содержащая теги, формирующие раскрывающийся список 
х$4г=' <ЗЕЩЕСТ 10 ="ТЕ$Т" опспапде = “тузеесоп() "> ' 
Тог (1 = 0; Г <аорНоп$ . 1епд+и; 1++){ 

хрге{!х = (! == М 56|)? '$ЗЕЁЪЕСТЕО=’ +№_5е1: 

х5{г+= '«<ОРТШОМ ' + хргейх + '>’ + аорот$ [1] 

х${1+=  '</ЗЕЁЕСТ>' 

доситепт .мгтте(х$тг) / 

Рапсйоп туз@есйопО { а 
уаг 1е5паште, 1езбпитбег; 

+ез4питЬег = доситет{ . а!.ТЕЗТ.зеес4е4таех 


Е (езпиштбег == 0) 
1е5{пате="Мат. анализ” 
е!зе{ 
Е (ебтиаштбег == 1) 
(езтате = "Квантовая физика" 
е15е{ 
ТЕ (+ез4питБЬег == 2) 
(езташе = "Биология" 
е1зе 
(езтате = "Органическая химия" 
} 
а!ег(("ВЫ! будете сдавать: ““ 1езтпате) 
</ЗСНРТ> 
<ИНтмЕ> 


4.6.2. Настоящее меню 


Меню, создание которого мы сейчас рассмотрим, состоит из главного горизон- 
тального меню и нескольких вертикальных подменю (рис. 4.23). Мнели вам объяс- 
нять, что такое меню? Подменю раскрываются при наведении указателя мыши на 
опции главного мелю. Не обязательно, чтобы каждой опции главного меню соот- 


"ШГ. - ЧМои Ноп4Менть\/$\тепи.ПВп - Мсюзпк И\егпе! Ехр!ю!е! 
файя [равкя Выд Избранное Сарвис  Гправка 
>>. 52 '-^0-[|3 98% [<] Ш ^Ф -й 5 №. Ш^14;: 1: | >вШИ1 | 


НН с 
| еж 1 (Меню 2 Меню 1 | 

| Подм«да. 11 

| Порцйашо 12 | 

Подменю.1\3_ | 


Яндекс 3} Мой компьютер р й 
Рис. 4.23. Внешний вид меню 
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ветствовало подменю: некоторые опции главного меню могут быть терминальны- 
ми. При выборе опции щелчком левой кнопкой мыши происходит некоторое дей- 
ствие, определяемое сценарием. Это может быть ЧВГ-адрес веб-страницы или 
строка, содержащая код ЛауаЗ сре. 


Код сценария, реализующего такое меню, мы сделаем возможно более универсаль- 
ным и оформим в виде двух файлов с расширением ]}5. Первый файл, тепи_ргт.]з, 
будет содержать параметры меню (листинг 4.18). При создании приложений его 
содержимое можно изменять в зависимости от конкретных задач. Например, в этом 
файле определяются конкретные названия опций и действия для них, цвет и дру- 
гие параметры. Таким образом, это — переменная (настраиваемая) часть опи- 
сания меню. Второй файл, тепи_1194.]$, будет содержать описание механизма 
построения и функционирования меню (листинг 4.19). В нем используются 
параметры, определенные в первом файле. Это постоянная часть описания 
меню. Разумеется, вы можете скорректировать содержимое этого файла по сво- 
ему усмотрению. 


Чтобы создать меню, в НТМГ-документе следует просто записать следующие строки: 


<ЭСНРТ $ВС = "тепи_рит./5"х/5СЕРТ> 

<ЭСНРТ $РС = "тепи_Ы14.]5"х/ЗСЕРТ > 

<УЭСНРТ >БийаМепи()</ЗСЕНРТ > 
Здесь БиПаМепи() — функция, определение которой дано в файле тепи_119.}з. 
Она выводит на экран меню в соответствии с параметрами, заданными в файле 
тепи_ргт.}з. 


Рассмотрим пример, в котором главное (горизонтальное) меню содержит три оп- 
ции, первым двум из которых соответствуют вертикальные подменю. Последняя 
опция является терминальной. Названия опций выбраны так, чтобы было легко 
понять, что к чему относится. 


В первом файле мы задаем параметры цвета, шрифта, а также состав названий 
опций и действий и координаты. Названия опций меню, их позиционирование, 
действия и содержание статусной строки задаются с помощью массивов. В конце 
концов, структура меню задается двухмерным массивом. Обратите внимание, что 
если действие представляет собой не ОВГ-адрес, а некоторый код на языке ]Лауа- 
$сире, то он должен начинаться с префикса ")ауазсир":", за которым следуют вы- 
ражения, разделенные точкой с запятой. 


Во втором файле определен ряд функций, с помощью которых меню развертыва- 
ется и функционирует. Отображение меню происходит на основе использования 
НТМЕГ-тегов, определяющих таблицы. Фрагменты НТМГ-кода, из которых скла- 
дываются генерируемые строки НТМГ-документа, определены в виде элементов 
массива. Позиционирование меню производится с помощью параметров {ор и 1ей 
таблицы стилей, которая также генерируется сценарием. Среди множества функ- 
ций, определенных в этом файле, имеется главная — БиЙаМепи(). Вызов ее в сце- 
нарии, расположенном в НТМГ-документе, выводит меню в окно браузера вме- 
сте с другими элементами этого документа. 


Листинг 4.18. Код файла тепи_рит./$ 


/* Параметры меню */ 
// Цвета: 
уаг сВогаег = ‘'Б|ше’ // цвет рамки л. 


продолжение & 
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Листинг 4.18 (продолжение) 


уаг < В?тасё = "#839625" // цвет фона 
уаг с1В2АсЕ = '#а6Е4{е' // цвет подсветки фона опции 
г м, пасе = "ше" // цвет надписи обычной 
уаг с1ЕпАсЕ = 'ШасК"' // цвет надписи при подсветке опции 


// Шрифг (параметры стиля) 


уаг сНоп(517е = ‘1 // размер шрифта 
уаг сРоп{РатПу = 'итез’ /* семейство шрифтов ('ама!’, 
‘сошгуге', ‘Ише’ ит, п.) */ 


// Другие параметры: 
уаг <1о5еТипеон{ = 500 // время задержки свертывания подменю, мс 
уаг зе {Роз = Ёа15е /* автоматическое позиционирование опций 
меню и подменю (если 1гие, 
то задаются координаты только 
первого меню) */ 
// Собственно меню: 
уаг тепи = пех АлауО 
шепи[0] = пех АггауО 
/* Параметры главного меню: 
название опции; 
ОВГ-адрес или строка с колом Лауа5сг!ре, начинающаяся 
"] ауазсгЕрЕ: " 
статусная строка; 
1е (х-координата главного менк 
{ор (у-координата главного меню) ; 
у\1А{й (ширина главного меню 
1ей (х-координата подменю) 
{ор (у-координата подменю) 
у\1атв (ширина подменю). 


тепи[0][0] = пе\м АггауС'Меню 1","", ‚” Выберите что-нибудь из подменю", 50, 


10, 80, 50,120, 120) 

шепи[0][1] = пех Аггау("Подменю 1.1”, "]ауазск1 ре: 1зеоку. до (-1)", 
"Назад") 

пети[0] [2] = пем Аггау дмено 1.2”, "ВЕбр://мии.уапех.гиа",  "Яндекс") 
пи [9 | = пем Аггау("Подменю 1.3”, "Зауазсг1ре: 
а1ек® ('Привет!')","Окно с приветствием") 

шепа [1] = пем Аггхауо 

пера [1] [0] = пем Аггаус 'Меню 2 130, 10, 80, 130, 120, 0) 


шепа [1] [1] = поем Аггау ("Подменю 2.1 

шепа [1] [2] = пем Агккау ("Подменю 2.2 

пепа [2] = пем Аггауо 

шепи [2] [0] = пен АггауС'Меню 3" Беер: //мми.свае.ги", "СНАТ.ВО", 210, 
10, 80, 0,0, 0) 


Листинг 4.19. Код файла тепи_619.}$ 


уаг 1е = доситепт. а! ? тие : Тазе есть ли что-нибудь в документе? 
уаг о\уегВох = 
уаг Итегр 


// Заготовки элементов НТМГ-кода 


уаг БагНит! = пем АтауО 

БагН+т![0] = '<0ОМ |=" \убагроз ' 

БагН+м 1] = '" ЭТУЕЕ=" роз оп: абзо ще; 1е{: 
БагН4{т [2] = 'рх; {ор: * 


БагН4т [3] = 'рх;"” оптоизеоуег="орепЬох(" 


РагНет1[4] = ') " опбмочзеоче="с1озерох (' 
РагНет1[5] = ') " опс11сКк="с11сКЬох (' 
БагНнЕи1 [6] = ' )"><ТАВЬЕ СЕШПРАОРОТМС=0 СЕЬЬЗРАСТМС=0><ТВ><ТО ВССОШОВ="! 
БакгНЕпи1[7] = '"><ТАВЬЕ СЕШЬРАОРОТМС="0" СЕШЬЗРАСТМС="1" ВОВОЕВ = "0"> 
<ТВ><ТРЬ СПШАЗ5 "прарагроз" ТО = "прафагроз' 
БакгНнНЕш1 [8] = "' МТОТН="' 
БРагНЕш1 [9] = '" ВССОШОВ="' 
РагНЕи1 [10] = "' СТУБЕ="со1ог:' 
БРагНЕш1 [11] = ' ; ЕопЕ-в12е: '+сЕопЕ512е+'; Еопе-Еаш11у: '+СсЕопЕЕам11у+';" 
РагНеи1[12] = '</ТОо></ТВ></ТАВЬЕ>< /ТО></ТВ></ТАВЬЕ>< /ОТУ>' 
уап БохНЕи1 = пем Аггауо 
рохНыи1 [0] = '<р1У ТО="а1уЬох' 
БохНеш1[1] = '" 5ТУБЕ="ро51Е1оп : аъ зо1аее; \13151116у:Ь1ааеп;1еЕе: ' 
фохНет1 [2] = "'рх;Еор:' 
БохНеш1[3] = 'рх; ЕопЕ-Еаш11у: '+сРопеЕаш1 1у+'" опмоизеойпе="с1озерох (' 
Бохнеи1 [4] = ') "><ТАВЦЕ СЕШЦРАРОТМС=0 СЕШ.ЗРАСТМС=0><ТВ><Тр ВССОГОВ = 
РохНЕп1[5] = '"ХТАВЬЕСЬАЗ 5 ="ппафрох" ТО="шрарох! 
БохнНЕи1 [6] = '" СЕБПРАООТМС="0" СЕБШЬБРАСТМС="1" ВОВОЕВ="0О" >' 
БохнНЕпи1[7] = '<5РАМ ТО="а1уЬохроз' 
Бохнеш1 [8] = '" ормочвеоуекг="орепЪохров ( ' 
Бохнем1 [9] = ') " опмоцзеоче="с1озеЬохров ( ' 
РохНнЕш1 [10] = ') " опс11сК="с11сКЬохров (' 
РохНЕш1 [11] = ') "><ТВ><ТЬ СЬА$5 = "шпарохроз" ТО="ипарохроз' 
БохнНЕш1 [12] = '" МТОТН="' 
БохНЕш1 [13] = '" ВССОШОвВ="' 
РохНЕш1 [14] = '" СТУБЕ="со1ог: ' 
рохНЕ1 [15] = ';ЕопЕ-в12е: '+СсЕопеб12е+!"> ' 
ЪохнЕш1 [16] = ‘</ТЬ></ТВх/5РАМ>” 
РохНЕи1 [17] = '</ТАВЬЕ></ТО></ТВ></ТАВЬЕ></ОТУ>' 
Еопсе1ор Бо11ЯМепроо { // построение меню (главная функция) 
1Е (1е) { 
ра11амепроаВагоО; 
ри11абаМепоо ; 
1Е (зе1ЁЕРоз) РозМепоОЯя 
Вез1хебабМепоо ; 
Еопсе1оп Ба11АМепавВако { // построение горизонтального меню 


Рог (1 =0; 1 < шепа. Тераев; 1++){ 
уаг з = БахНЕи1[0] + 1 + БагНет1[1] + мера [1] [0] [3] + БахНЕи1[2] + 
шепа[1] [0] [4] +° Баг Нёш1 [3] +1 + Баг НЫ [4] + 1+ БахНЕм1 [5] +1+ 
ЪагнНЕпи1[6] + с! Вогаег +БахН®м1[7] + 1 + БахгНем1[8] + шера[1 ] [0]1[5] + 
фахгНЕм1 [9] + с1Ва1пасЕ + БагНЕм1 [10] + с1Ер1пасе + БакНе1 [11] + 
шепиЕ1] [0] [0] + БахНЕш1 [12]; 
аосчмепе .мг16е1п(3); 


Еопсе1ор Ба11абаЬМепоо { // построение подменю 
Рог (1 =0; 1 < шепа.1ераев; 1++){ 
1Е (мепа[1].1ердаев > 1) { 
уахг $ = БохНеи1[0] + 1 + БохНе1Е1] + шепа[1][0][6] + Бохнем [2] + 
шепи [1] [0][7] + БохНЕт1[3] + 1 + БохНет1[4] + с Вогаег + БохНеи1[5] + 
1 + Бохнеш1 [6] 
Рог (3 =1; ]< шера [1]. 1ероёь; 5++) { 
уах 81 = 1 + 
уаг 52 =1+ "3+9 
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Листинг 4.19 (продолжение) 
3 += БохНЕи1[7] + 82 + БохНЕи1[8] + 31 + БохНё1[9] + 81 + 

БохНЕш1 [10] + 81 + БохНЕш1 [11] + 82 + Бохне1 [12] ‹мепи[1] [5 1] 

рохНёш1 [13] + с1В91пасё + БохНи1[14] + с1Еп1пасё * БохНЕш1 [15] + 


пепи [1] [31[0] + БохНёш1 [16] 


8 += БохНеи1 [17] 
досишепе.мг1 (е1п($) 


ЕопсЕ1оп РозМепио { 


ог: И 0; 1 < шепи.1епаЕеН; 1++) { 
рагСигг = досимепе.а11 [ '41уфагроз' + 1] 
1Е (1>0) { 
БагРгеу = досимепе.а11['41уБагроз' + (1 - 1)] 


РагСигг.з6у1е.1еЁЕё = БагРргеу ‚оЕЕзеецеЁе + 
Багргеу.оЕЕзееитаен - 1 

\ 
1Е (пепла [1] .1епдев › 1) { 

рохСигг = аосчшепе.а11['Аа1урох' + 1] 

охСигг. $ту1е,р1хе\Тор = БагСигг.оЕЕзееТор + 
БагСигх .оЕЕзеенетзане - 1 
БохСигх. з6у1е.р1хе1еЁЕ = рагСогг ‚ о! ЕзесьеЕе 


ЕорсЕ1оп Вез1хеби Мета () { 
Юг (1 =0; 1 <‹ шепа.1епаев; 1++) { 
1Е (шепа[1] .1епдеВ > 1 && щепа [1] [0] [8] <= 0) { 
е1 = досищепе.а11 ['шпаох' + 1] 
и = досимепе.а11 [ '41уБагроз' + 1].оЕЁзееи1аеь 
1Е (е1.оЕЁзекитаеь ‹ и) е1.з6у1е.м1аеЬ = и 


\ 


Еопсе1оп орепрох(х) { 
ра1пЕГауек ('шпафагроз' + х, асб1уе = Етое) 
ПоиГауег ( 'а1уЪох ' +х) 
Юг (1 =0; 1 <‹ шепа.1епаёВ; 1++) 1 
оуегВох = 'а1урох' + х 
мпао\м. з{ати$ = тепи[х] [0]1[2] 


(1 != х) с1овзерох(1, 0) 


) 

Рапсйоп с1озебох(х, Итеоц® { 
ра ауег (‘ппибагро$ ' + х, асй\е = Тазе) 
сеагТитеоцщ (Итего) 


Й (Нтеощ == 0) таеЁгауек( 'Чурох’ + х) 

е1зе Е1шег10 = зееТ1щеоме ('519еьауег ("а1урох' + х + "'") ', 
с1озет1меопе ) 

оуегВох = ' ' 


У1паом. вбаказ = аеЕай1Е 55 аказ 


Ропсе1оп ©11сКЬох(х) 
с11сКМепа (мепа [х] [0]11]) 
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ВпсНоп орепфохроз(х, у) { 
ра! п{Ёауег ("'тпибохро$' + х + '' +у, асИме = тие) 
оуегВох = 'А\мБох’ + х 
и"1паом.зеаказ = мепа[х] [у] [2] 

} 


ЕорсЕ1оп с1озефохроз(х, у) { 
у1паом.зЕабиз = аеЕал1Е5Еасаз 
ра1пЕГауегк( 'шпаБохроз' + х + '' +у, аселуе = Еа]1зе) 


) 


Еорсе1оп с11скБохроз (х, у) { 
с11сКМепа (мера [х] [у] [11) 
} 


ЕопсЕ1оп с11сКМепа(з) { 
1Е (3. 1 паехоЕ (' 3 ауазсг 1 рЁ: ') == 0) еуа1 ($3); 
е1зе 1Е (5 != '') им1оаом.1осае1оп.ВгеЕ = $3; 
в 


Еопсе1оп ра1пЕГауег (1ауегтТр ‚, асе1уе) { 
1Е (]1ауег = аосимере.а11 [1ауег10]) { 
1Е (асблуе) { с1Ва = с1ВаАсе; С1Еп = С1ЕптАсЕ } 
е1зе { с1Ва = с1В91пас®; с1Еп = с1Ео1птас®е } 
1Тауег.зЕу1е.БаскакгочпАСо1ок = с1Вд 
Лауег . ву1е.со1ох = СЕ 


ТипсИоп эпо\ммЁауег (1ауег!О) { 
11 (ауег = доситепт.а !Пауег!0]) Гауег. з1у1е. м1 ИЩу = 'у1$1[е*‘ 
} 


ТипсНоп П!А4еЁауег(1ауег!О) { 
И (ауег = аоситеп+. а! Пауег!О] && (оуегВох != 1ауег!0)) 
доситеп{.а | Пауег! 0]. 51у!е. м 516 ИМу = ‘'шадепт’ 

} 
Обратите внимание, что позиционирование элементов меню и подменю может 
происходить независимо друг от друга. Это позволяет визуально представить меню 
на экране в виде пространственно разнесенных частей (рис. 4.24). Таким образом, 
чтобы сделать несколько меню, не обязательно для каждого из них создавать и за- 
гружать специальные файлы с описаниями. 
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Тексты большого объема, расположенные на веб-странице, обычно снабжают по- 
исковой системой. Внешне она обычно выглядит как поле ввода поискового обра- 
за (набора символов, который требуется найти в тексте) и кнопки, щелчок на 
которой запускает процедуру поиска. В простейшем варианте эта процедура про- 
кручивает текст в окне так, чтобы найденный поисковый образ оказался види- 
мым и выделенным. Если поиск оказался неудачным, то положение текста в окне 
остается неизменным и, возможно, появляется соответствующее сообщение. 
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Е С:\Мои документы 5 \тепи. т ® МилозоН Ниете! Ехрюгег Е 
Фэй" Правка ЭНУ И’бранмье Сйшё Спраежа |# | 
чо ана 10° 


Меню ^ 


Менго2 | 
Модыенн> 2.1 
И 6: "КК 22 


| я 


2} МЫ компьютер 


Рис. 4.24. Меню можно представить в виде пространственно разнесенных частей 


Для решения задачи поиска в тексте используется объект Тех{Капге. Этот объект 
просто обеспечивает доступ к текстовой информации, находящейся в объектах, 
которые соответствуют тегам <ВОБУ>, <ТЕХТАВЕА>, <ВОТТОМ> и <ПМРОТТУРЕ = 'чехё”>. 


В рассматриваемом ниже примере организуется поискв тексте, находящемся в теле 
НТМЕ-документа, то есть в контейнерном теге <ВОБУ>. В этот же контейнер мы 
помещаем поле ввода поискового образа и кнопку для инициации поиска. Сцена- 
рий содержит описание функции туйпаО, вызываемой при щелчке на кнопке. 
Функция туйпа() с помощью метода сгежеТех{ВапееО создает текстовую область. 
Это не копия текста, содержащегося в теле документа, а просто ссылка на него. 
Далее с помощью метода ЙпаТежО производится поиск в текстовой области стро- 
ки символов, которую ввел пользователь в поле с именем УОВО. Наконец, с по- 
мощью метода зсгоШио\УемО содержимое окна прокручивается так, чтобы най- 
денная строка символов оказалась видимой. С помощью метода $е1ес{О найденная 
строка в тексте выделяется цветом (подсвечивается). 

<НТМ> 

<вору> 


<1МРОТ ТУРЕ = "1ех!" МАМЕ = "М\МОВО" УАГОЕ = "" УМЕ = 20 > 
<ВОПОМ опсИск = "туйпа()">попсК</ВУТТОМ> 


<! Здесь расположен текст, в котором производится поиск > 


</воБ\> 

<5СЕТРТ> 

ТипсНоп туНпа() { 

ор] = аосищепе .Рроду.сгеасеТех(Вапае() —// создаем текстовую область 
ор). Е1паТехё (МОВО.уа1ае) П производим. поиск 

об]. зсгоШи{о\МемО ° прокручиваем текстовую 


область в окне */. 
05). заесё0 выделяем найденное 
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</ЗСВТРТ> 

<ИНТМГ> 
Если поиск неудачен (поисковый образ, введенный в поле ввода, не найден), то 
ничего не произойдет. А что будет, если пользователь нажал кнопку Поиск, когда 
ничего не было введено? Появится сообщение об ошибке. Чтобы исключить по- 
добную неприятность, потребуется несколько изменить код программы. А имен- 
но следует проверить, не является ли введенный поисковый образ пустым. Ниже 
приведен вариант кода функции: 

ТипсНоп туНпа(){ 

й (МОАБмаме) гаи // если поисковый образ пуст, выходим 

об = Чоситет. роду .сгеаеТехжВапаео 


ов] .НпаТех{ (ЛЮРО. уаше) 
06].5сго! Т пю\Ме\О 


06] .зе1есЕ() 

} 
Теперь рассмотрим вариант, при котором на странице помимо текста присутству- 
ет только кнопка Поиск. Щелчок на этой кнопке должен привести к появлению 
формы, в которую пользователь должен ввести поисковый образ. Если этот поис- 
ковый образ окажется непустым, то запускается процедура поиска, в противном 
случае ничего не произойдет. В теле функции поиска использован стандартный 
метод ргошрЮ, который принимает в качестве параметров пояснительный текст 
и начальное значение поискового образа (в данном случае — пустую строку) 
и предоставляет поле для ввода значения. В окне есть две кнопки — ОКи Отмена. 
Метод ргошр{О возвращает введенное пользователем значение либо Ё1[5е, если 
пользователь щелкнул на кнопке Отмена. Ниже приводится описание функции: 


ГапсИоп туйп90\{ 
У(Ю = рготри"Введите, что найти: ","") 


2 


К МЮ тгешшт // если поисковый образ пуст, выходим 
оБ] =4оситепё . Боду. с,* ееТех(КапгеО 

об] ИпаТех(\/ЮОВоО) 

ОБ]. .зстоШио\“ем“О 

о „.5е1есё () 


1 
В качестве упражнения измените рассмотренные выше функции поиска таким 
образом, чтобы в случае неудачного поиска в тексте на экране появилось сообще- 
ние «Не удалось найти». Для вывода сообщения воспользуйтесь стандартным 
методом мег. 


Ниже приводится пример организации поиска не в теле документа, а в текстовой 
области, заданной тегом <ТЕХТАКЕА>. Напомним, что внешне элемент <ТЕХТАВЕА> 
выглядит как прокручиваемое поле ввода. Если информация о теле документа 
(о содержимом контейнерного тега <ВОБУ>) хранится в объекте Боду, то в случае 
элементов <ТЕХТАВЕА»>, <ВОТТОМ> и <ПММРОТ> необходимо обращаться к ним по зна- 
чению атрибута Ш или МАМЕ 


<НТМЕ> 

<ПМРИТ ТУРЕ = "{ех(" МАМЕ = "\ВО" УАШОЕ = "" УМЕ = 20 > 
<ВИТТОМ опсПск = "туйп9О">Поиск</ВиТТОМ> 

<Р> 


<ТЕХТАВЕА Ш = "ту4ехё"> 
<! Здесь расположен текст, в котором производится поиск > 
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</ТЕХТАВЕА> 
<УСВТРТ> 

ТипсНоп туйН па() { 

и @\ОВОлхаме) гегагп /* если поисковый образ 


пуст, выходим */ 

об] = 4оситепеё. аП .шуехе.сгеа{еТех{КапгеО /* создаем текстовую 
область */ 

1.1 ех+ (МОВО . уа1 // производим поиск 

об] . зсгоПио\У ем О /* прокручиваем текстовую 
область в окне */ 

// выделяем найденное 1 

1 

</5СВШРТ> 

</НТми> 


4.8. Таблицы и простые базы данных 


Таблицы являются, пожалуй, наиболее часто используемыми элементами в веб- 
дизайне. Это обусловлено простотой и удобством компоновки документа с по- 
мощью тегов таблицы, таких как <ТАВИЕ>, <ТВ>, <Г> и др. Вы разбиваете все про- 
странство окна на прямоугольные ячейки с видимыми или невидимыми границами 
и размещаете в них элементы документа (изображения, тексты, ссылки, кнопки, 
другие таблицы ит. п.). Таким образом, таблицы выполняют роль каркаса доку- 
мента. До появления С5$ они оставались единственным средством точного пози- 
ционирования элементов, но и сейчас широко используются как мощный инстру- 
мент для понятной организации и эффектного представления информации. 


4.8.1. Доступ к элементам таблицы 


Таблица как объект документа имеет две коллекции, посредством которых осу- 
ществляется доступ к ее содержимому. Первая из них — коллекция строк го\з, 
а вторая — коллекция ячеек се. Коллекция го\з содержит все строки таблицы, 
включая разделы, соответствующие тегам <ТНЕАО> и <ГЕООТ>. Коллекция се[$ со- 
держит все элементы таблицы, созданные с помощью тегов < ТН? и <ТО>. Доступ 
к элементам коллекций осуществляется либо по индексу, либо по значению атри- 
бута Ш в соответствующем теге. Так, для доступа к строке таблицы можно ис- 
пользовать значение Г) в теге <ТВ>, а для доступа к ячейке — значение Ш в теге 
-ТН> или <ТЬО>. При использовании индекса (номера) следует иметь в виду, что 
нумерация начинается с 0. При этом ячейки таблицы нумеруются слева направо 
и сверху вниз. 


Рассмотрим пример простой таблицы, содержащей три столбца и четыре строки 
(рис. 4.25): 


<НТМГ> 

<ТАВЬЕ ТР = "мубаф"> 

<ТНЕАО>Моя таблица</ТНЕАО> 

<ТН>Фамилия< /ТН><ТН>Имя< /ТН><ТН>Должность</ТН> 
<тВ 10=“г|"> 
<ТО>НВаНОВ</ТО><ТО>МВаН</ТО><ТО>#НреКТор</ТО> 
</ТКВ> 

<ТВ 10="г2"> 
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<ТО>Петров</ТО><ТО>Петр</ТО><ТО>Заместитель директора</ТО> 


</ТВ> 
<ТВ ТО="у3"> 


<ТО>СМЕТороВа< /ТО><ТО>3Зппо4Ка</ТО><ТО>СекреТарта< /ТО> 


</ТВ> 
<ТВ ТО="г4"> 


<ТО>Федоров</ТО><ТО>Федор< /ТО><ТО>Водитель</То> 


</ТВ> 
</ТАВЬЕ> 
</НТМЬ> 


‘а СЛМои поК4Мепть М/$\ТАВЬЕ НТМ - Мегозой ]п{етет, 
|’ Файя Правка. Вид Избранное Сарвис | Справка 


ные 


Ре] 3 


г | Адрес. 


® Ссыпки” 


Моя таблица 


Фамилия Имя Должность 
Иванов Иван Директор 
Петров Петр Заместитель директора 


Сидорова Эллочка Секретарша 


Федоров 


79] Готово 


Федор Водитель 


|] 


3) Мод компьютер д 


Рис. 4.25. 


Пример таблицы 


Ниже приведено несколько примеров ссылок на элементы таблицы из сценария: 


Чоситеп+.а!|.туаб.го\м/$ [0] 
оситепт.а|.ту{аб.го\м$[1] 
оситепт.а.ту{аб.гоми$ [" и!" ] 


оситеп{.а!.туфаб.се!$[0] 
Чосцмепе.а11.тмубаЮ.се11$[3] 


Чосчмепе.а11.пубар.се11$ [4] 
Чосипепе.а11.мубар.се11$ [6] 


// ссылка на строку заголовков столбцов 

// ссылка на первую строку данных 

/* другой способ ссылки на первую 
строку данных */ 


/* ссылка на ячейку, содержащую 
* 


"Фамилия" 


// ссылка на ячейку, содержащую "Иванов" 
// ссылка на ячейку, содержащую "Иван" 
// ссылка на ячейку, содержащую "Петров" 


Чтобы обратиться к строке или ячейке таблицз, следует учесть иерархию объек- 
тов: сначала мы обращаемся к коллекции а| всех элементов документа, затем 
к таблице и только после этого — к элементу таблицы. Обратите внимание, что 
эти ссылочные выражения возвращают не содержимое элементов таблицы (строк 
или ячеек), алишь ссылки на элементы как на объекты. 


Каждая строка таблицы (элемент коллекции го\з), являясь объектом, имеет свою 
собственную коллекцию ячеек, которая называется се|$, так же как и коллекция 
всех ячеек таблицы. Однако нумерация ячеек в этой коллекции происходит в пре- 
делах одной строки начиная с 0. Например, в случае трехстолбцовой таблицы ячей- 
ки из коллекции се$ для одной строки имеют индексы 0,1и 2. 
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Примеры 
а му@в. 45 | е /* ссылка на ячейку, 
содержащую "Фамилия" */ 
аоситепе. а1] „шуаВ. го [1]. се $[0] /* ссылка на ячейку, 
содержащую "Иванов" */ 
Фоситепё . а „му@Б гом$[1]. се1$ / ссылка на йку 
содержащую "Иван"*/ 
еп. а1] муар. го\з [2] . сеП$[0] /* ссылка на ячейку, 
содержащую "Петров" */ 
Фоситепт. а луг го, 2"] .се!5Й] /* ссылка на ячей 


содержащую "Петр" */ 
Выше мы рассмотрели создание ссылок на элементы таблицы. Эти ссылки при- 
меняются для чтения и изменения содержимого таблицы. В 1Е4-+ для этой цели 
можно использовать свойства шпегГех и шпегНТМЕ, С помощью свойства шпегТеж 
читается и изменяется обычное текстовое содержимое ячеек. В случае когда 
в ячейке находится НТМГ-код, для его изменения необходимо аналогичным об- 
разом воспользоваться свойством шпе/НТМГ. Впрочем, если содержимое ячейки 
является обычным текстом, то вполне можно использовать и шпегНТМГ. Таким 
образом, свойство шпеНТМЕ: универсальнее, чем шпегТехе. Если таблица выводит- 
ся в окно браузера (то есть видима), изменение содержимого ее ячеек отобразит- 
ся автоматически. 
пе. а! .туаЬ. гом/$[1] . тпегТех{ // ИвановИванДиректор 
11 пуфаь. сет егТе» // Иванов 
тута , ‹ й ппегТехе // Директор 


ту 


/* Изменяем текстовое содержимое ячейки: */ 

оситеп{.а|.туфаь.го\м$[1].се!$[2].{ппегТех{ = "Сторож" 

/* Заменяем текстовое содержимое ячейки на изображение: */ 

Фосимепт. а! 1. мубаб. гомз [1].се115$ [2]. 1ппегНТМЕ = "Мб ЭВС=’рисЕ.]ро’>” 
Следует иметь в виду, что изменять содержимое таблицы необходимо по ячей- 
кам, а не по строкам. Иначе говоря, попытка использовать выражение вида: 


'егТехё = новое_значение 
приведет к удалению строки и, возможно, к ошибкам выполнения сценария. 


Коллекции строк и ячеек, как и любой массив, обладает свойством 1еп{й, значе- 
нием которого является количество элементов в коллекции. 
Примеры 


// количество всех строк 

уга! | количество всех ячеек 
01.а1.ту(аб.гом$[2].се115.1еп{ /* количество ячеек в 

строке с индексом 2 */ 


4.8.2. Добавление и удаление строк таблицы 


Добавление новой строки в таблицу производится с помощью метода шзейКо\О. 
Этот метод возвращает ссылку на вновь созданную строку, которая затем исполь- 
зуется для вставки ячеек. Ячейки вставляются в строку с помощью метода 
'п5етеСе 11(индекс_ ячейки). Данный метод возвращает ссылку на созданную ячейку, 
которая затем используется для задания содержимого ячейки. Ячейки вставляются 
в строку по порядку без пропусков начиная с нулевой. Так, нельзя создать ячейку 
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с индексом 3, если ячейки с индексами 0, 1 и 2 еще не созданы. С другой стороны, вы 
можете последовательно создать любое количество ячеек в строке. 


Таким образом, новая строка создается в три этапа: сначала к таблице добавляет- 
ся новая строка, затем в нее вставляются ячейки, после чего они заполняются зна- 
чениями. Ниже приведен пример добавления строки к существующей таблице 
и заполнения ее ячеек значениями: 

пеутгоуу = доситепе. 21 а ке // добавляем новую строку 

\еу 5е | // вставляем ячейку с индексом 0 

пенсе11. 1ппегТех<="Привет // заполняем ячейку значением 

пемсе/=пемгом. вСеН (1) 

пемсе!1.1ппегНнтТМЕ="<1М@ $ВАС='р!с+.]ра'>" 

пеусе! | = пе\мгом .1и5егЕ Се (2) 

пемсе!. 1ппегНТМ1="<в>Охранник</В>" >" 
Для удаления строки таблицы служит метод 4ееКо\МНеКС СТроКМ). Параметр 
указывает номер удаляемой строки. Например: 


оситепт.а|.тубаб.деееКо\(2) 


се | | =пежгом, 1 


4.8.3. Генерация таблиц с помощью сценария 


Один из неприятных моментов в создании таблиц посредством тегов НТМУ, состоит 
в большом количестве этих тегов и необходимости тщательно следить за правильной 
их расстановкой. При этом коррекция содержимого ячеек больших таблиц оказыва- 
ется весьма хлопотным делом. Облегчить работу в ряде случаев помогает хранение 
содержимого ячеек в массивах и генерация таблицы с помощью сценария. 


В следующем примере предполагается, что содержимое строк таблицы хранится 
в отдельных массивах. С помощью операторов цикла формируется строка, содер- 
жащая теги таблицы, а затем эта строка записывается в НТМГ-документ. 


<НТМ> 

<ЗСВТРТ> 

/* Массив заголовков столбцов */ 

ан = пем Аггау ("Фамилия", „”Имя”, "Должность") 


/* Массив данных */ 
аЧч = пем Аггауо 
аа[0] = пем/ Аггау( "Иванов", Иван" Иван", "Директор") 
аа[!] = пем Аггау( "Петров", “ Петр", "Заместитель директора") 
а9[2] = пем Аггау (ОдуроеяЭтон', "Эллочка", "Секретарша") 
аа[3] = пем Аггау ( "ФеджвФело, "Федор", "Водитель") 
за = "<ТАВГЕ>" 
/* Формируем заголовки столбцов таблицы*/ 
Тог(1=0; 1<ай..1епо{й; 1++){ 
мар+= "<ТН>" + ай] + <> 


/* Формируем строки таблицы */ 
1ог(1=0; 1<а4. 1епай; н+) { 
З{аб+= "<ТА>" 
0г(]=0; |'<аа[.1. 1епоти;. ++) ! // содержимое ячеек строки 
эиаб+= АУ 


З{аб+="</ТВ>" 
| 
З{{аб+= "</ТАВЕЕ>" 
аоситепЕ{.мгКе ($1[аЬ) запись в документ 
</5СВТРТ> 


<итмр 
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4.8.4. Простые базы данных 


Достаточно эффективный способ формирования таблиц — использование специ- 
ального элемента управления АсйуеХ, называемого Зипир!е Табаг Ожа (ЗТО — 
простые табличные данные). Этот элемент вставляется в НТМГ-документ с по- 
мощью тега <ОВ ВСТ> и позволяет легко управлять данными, хранящимися в обыч- 
ном текстовом файле. Вы можете изменять, добавлять, удалять, сортировать, ис- 
кать и фильтровать (выбирать) данные. Но главное достоинство применения ЭТО 
заключается в простоте создания больших таблиц, например каталога ссылок. 


Собственно данные хранятся надиске в текстовом файле. При этом их табличная 
структура поддерживается с помощью символов-разделителей. В качестве разде- 
лителя строк обычно используется невидимый символ перевода строки (клавиша 
Емег). Однако можно задать любой символ в качестве разделителя строк. Данные 
различных ячеек отделяются друг от друга произвольным символом, не исполь- 
зуемым в каких-нибудь других служебных целях (например, запятая или верти- 
кальная черта). Если запятая встречается в значениях данных, то ее не следует 
выбирать в качестве разделителя. Создавать такие файлы можно вручную с по- 
мощью текстового редактора (например, Блокнота У! пдо\з). Кроме кото, в боль- 
шинстве систем работы с базами данных возможно преобразование специфиче- 
ских файлов в текстовые. 


В первой строке текстового файла записываются через символьный разделитель 
имена столбцов. Они не обязательно должны совпадать с теми заголовками стол- 
бцов, которые вы хотите видеть на экране. Главное их назначение в том, чтобы 
обеспечить доступ к данным. Это так называемые имена полей базы данных, или, 
другими словами, идентификаторы полей. Правила их образования такие же, как 
и для имен переменных. На рис. 4.26 первая строка содержит имена полей, а ос- 
тальные — собственно данные. Разделителем полей здесь является вертикальная 
черта. 


Ралл Прав Ко\/$. правка 


Фамилия |[Имя| Должность ы 

| Иванов | Иван| Директор 

| Петров | Петр | Заместительдиректора 
Сидорова | Эллочка| Секретарша 


Федоров | Федор | [Водитель | 


т г д 


Рис. 4.26. Пример текстового файла с табличными данными 


Элемент АсиуеХ ТО, управляющий данными, встроен в браузер [Е4+, а чтобы 
вставить его в НТМГ--документ, необходимо использовать следующие теги: 
<ОВУЕСТ 0 = "туабсоп{то|" 


СТА$$Ю = "СЕ$10:333С7ВС4-460Е-1100-ВС04-0080С7055А83"> 
<РАНАМ МАМЕ = "ЕН!е!абейт" УАШОЕ="!" > 


4.8. Таблицы и простые базы данных . 249 


<РАВАН МАМЕ = "Баёа0 ВЕ" \УАЕОЕ = "туд. {х{" > 
<РАВАМ МАМЕ = "УзеНеадег" ^ \МАШОЕ = {гие> 
</ОВУЕСТ> 
Контейнерный тег <ОВЗЕСТ> содержит множество тегов <РАКАМ>, с помощью кото- 
рых задаются параметры. В примере мы указали лишь некоторые из них: 


. НБедрейт — разделитель полей (ячеек); в примере значением этого параметра 
является вертикальная черта "|"; 


. Па ОЕГ— место расположения (ОВГ-адрес) текстового файла сданными; 
в примере мы указали просто имя файла ту4Ъ.1хЕ; 


. ОзеНеа4ег — определяет, содержитли первая строка в текстовом файле имена 
полей. 


Значение атрибута ГШ тега <ОВТЕСТ> выбирается произвольно, но оно обязательно 

должно быть указано. Если требуется установить символ, являющийся раздели- 

телем строк данных в текстовом файле, то следует добавить еще один параметр: 
<РАВАМ МАМЕ = "Во\ммбейт" \УМАЕОЕ="&# АЗСИ-код;"> 

По умолчанию значением атрибута МАЦЕ является "&#10;",то есть АЗСП-код сим- 

вола перевода строки. 


Для просмотра всех параметров элемента управления ЭТО, установленных по умол- 
чанию, достаточно загрузить в браузер следующий НТМТ-документ (рис. 4.27): 


'Месгозой тете! Ехрюге! 


| 
«РАНАМ МАМЕ ="Бонбевт МАЕ 10 «РАЛАМА —_, ь : р 
МАМЕ» ТемОнатег' УАГОЕ ме в "Езсаресва ЧА и | | РАВАМ МАМЕ Нез дес' | а 
УВЕЦЕ = ЗУЗ«РАВАМ МАМЕ» "$ В! -^.1°> ‹РАВАМНАМЕ 5 ойбамти" МАНЕ» «РАВАМ, . 


МАМЕ РкМаие"МАБИЕ» 2 РаьыСтелой“УАЕЧЕ ул 
УАЕЦЕ =**>«РАНАМ МАМЕ= н М МАМЕ Сапоивов" УАБЫЕ = У«РАЯАМ 
МАМЕ“ "С азезегинцие" МА! 4 } АМ. 'Ео\ЗУА] © '54РА АМ МАМ 

МАШ РАВАМ МАМЕ=' Ар Радбав" МАЕ =" 0" ‹РАВАМ МАНЕ“ ВазИВ Е“ МАШЕ» «РАВАМ 
МАМР*"»еадЗ!ае"\«ГИЕГ4" 


Рис. 4.27. Диалоговое окно, в котором показаны параметры элемента управления $ТО, 
установленные по умолчанию 


<НТМЕ> 
<ОВОЕСТ ТР = "пуасорЕго1" 
СТАЗ5ТС = "СЬ5ТО:333С78ВС4-460Е-1100-ВС04-0080С7055А83"> 

</ОВЗЕСТ> 

<ССВТРТ> 

а1ех® (пу@Бсопего1 .ЕппехгНТМг) 

</ЗСВТРТ> 

</НТМЬ> 


Чтобы отобразить в окне браузера таблицу с данными из текстового файла ту@Ъ. Ех, 
достаточно в том же документе записать следующий НТМГ-код (рис. 4.28): 


<ТАВЕЕ РАТАЗКС = «тудбсоп(го! ВОКОЕК = 5> 

<ТНЕАО> 

<ТН>Фамилия сотрудника</ТН><ТН>Имя</ТН><ТН>Должность</ТН> 
</ТНЕАО> 


<ТВ> 
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<Тр><5РАМ ПАТАЕГО "Фамилия" ></5РАМ></ТО> 
<ТО><ЗРАМ  БАТАЕЬЬ = "НМЕ1"></5РАМ></ТО> 
<ТО><“РАМ ОАТАЕГШО "Должность" >< /5РАМ></ТО> 
</ТВ> 

</ТАВЬЕ> 


Файл Пбавка Вид Избранное Сарвис Справиз у = | 
21943 им ау => ли’ 45 "и 


й 1 
{ 
Фамилия сотрудника! Имя Должность { | 
а ] 
(Иванов (Иван 1 Директор | | 
[Шетров Петр Заместитель директора \ 
Сидорова [Эллочка [Секретарша } Г 
] || 
| (Федоров Федор (Водитель | 
| совжы лриитаженьь дуть бр дня дез Я ера й ] 
| 
| | 
| 
| . 
9 ГОТОВО ь = Мой вохетьютер | 


Рис. 4.28. Пример таблицы, созданной с помощью элемента управления 5ТО 


Здесь в теге <ТАВН! Е> атрибут ОМАЗС в качестве значения имеет ссылку на элемент 
$ТР (значение Ш втеге <ОВУЕСТ>). Внутри тегов данных <ТГО», в контейнерах <ЗРАХ, 
значениями атрибутов ПАГАНО являются имена полей. Написание этих имен долж- 
но в точности соответствовать указанным в первой строке текстового файла дан- 
ных. Однако порядок следования и количество выводимых на экран полей может 
быть произвольным. Например, можно вывести не все поля или, наоборот, про- 
дублировать некоторые из них. Кроме того, можно изменить порядок отображе- 
ния полей. Этот порядок, а также состав отображаемых полей (столбцов) опреде- 
ляется в теге <ГАВЕР>. 


ВНИМАНИЕ = 
При использовании элементауправления ТВописаниетаблицы спомощьютега<ТАВЕ.> 
имеет небольшой объем. В теге <ТАВЕ.>, по существу, описывается лишьструктура таблицы, 
но не описывается ее содержимое. Описание данных содержится в текстовом файле. 


Таким образом, при использовании ЭТО мы организуем взаимодействие трех ком- 
понентов: элемент управления ЭТО устанавливает связь с источником данных 
(текстовым файлом), элемент <ГАВГЕ> связывается с 5ТО и источником данных, 
текстовый файл содержит собственно данные. 


В текстовом файле с данными может содержаться не только текстовая информация, 
но и НТМ!-коды. Чтобы эти коды отображались в таблице не просто как текст, а 
интерпретировались, необходимо в теги <П» добавить атрибут ОЧАЮВМАТА - "Паш". 
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и документЬ\/$\тудб. ит - Мсгозой ищегпет Ехргег 


Я 


й. Элл оказы, - 


| 


Рис. 4.29. Пример таблицы, источник данных которой содержит теги изображения <МС> 


При этом если ячейка таблицы не содержит тегов, то будет отображаться простой 
текст, а в противном случае — результат выполнения НТМГ-кода. Это позволяет, 


например, вставлятьвячейкитаблицыизображения, гиперссылки, кнопкиидру- 
гие элементы (рис. 4.29). Ниже приведен пример: 


<НТМЕ> 

<ОВТЕСТ Ш = "ту4дЪсопто]" 

СЬАЗУЮ = "СЕ$10:333С7ВС4-460Е-1100-ВС04-0080С7055А83"> 
<РАВАМ МАМЕ = “"Е!е!абейт"” УАШУЕ=" |"> | 
<РАКАМ МАМЕ = "Бжа0 ВП" УАГОЕ = "шуй. хе" > 

<РАКАМ МАМЕ = "О5еНеа4ег" УАЦОЕ = 1гче> 

</ОВУЕСТ> 

<ТАВЕЕ РАТАЗКС = Иту46сопго! ВОКОРЕВ = 5> 

<ТНЕАО> 

<ТН>Фамилия сотрудника</ТН><ТН>Имя< /ТН><ТН>Фото</ТН> 
</ТНЕАО> 


<ТВ> 
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<Тр><5$РАМ РАТАНШ = "Фамилия"></5РАМ>< /ГО> 
<ТО><5РАМ РАТАЕШ =" Имя ">< / $ РА\></ГО> 
<ТО><5РАМ РАТАЕО = "Портрет" РАТАКОВМАТА$ = " Пвш" > </ ЗРАМ></ТО> 
</тв> 
</ТАВЕЕ> 
</НтмЕ> 
Файл с данными ту46.4х(: 


Фамилия | Имя | Портрет 

Иванов | Иван]<1Ме ЗВС='р!сИ.]ро’> 

Петров | Петр | <!М@ $ВС=' р! с12 .]рд’> 

Сидорова | Эллочка | <М@ $ЗВС='р!с{3.]рд'> 

Федоров | Федор | <1!М@ $ЗВС='р!с{4.]рд’> 
Как уже отмечалось выше, элемент управления ЭТО имеет и другие параметры. 
В частности, есть параметры, с помощью которых можно установить фильтр (вы- 


борку) и сортировку данных. 


Для установки фильтра предусмотрены следующие три параметра: 

<РАААМ МАМЕ = "Е!/егСо!итп"”“ МАШЕ = "имя_поля" 

<РАВАМ МАМЕ = "Е!11егСг{ег!оп" МАШЕ = "оператор_сравнения" 

<РАВАМ МАМЕ = “Е! ЦегУа!ие” УАШЕ = образец 
С помощью этих параметров задается логическое условие (критерий) фильтра 
следующего вида: 

имя поля оператор сравнения образец 
Например, если требуется отфильтровать из таблицы все строки, в которых поле 
Фамилия имеет значение "Иванов", то необходимо использовать следующие теги 


параметров: 
<РАВАМ МАМЕ = "ЕЩег-Сошти" УАЦОЕ = "Фамилия" 
<РАКАМ МАМЕ = "ЕП егСгиег1оп" УАШОЕ = "==" 
<РАВАМ МАМЕ = "ЕП(егУаШше" УАЦОЕ = "Иванов" 


В качестве оператора сравнения можно использовать = (неточное равенство), == 
(точное равенство), != (неравенство), > (больше), < (меньше), >= (не больше), <= 
(не меньше). 


Чтобы выключить (сбросить) фильтр и сделать доступными все строки таблицы, 
достаточно использовать условие, которому заведомо удовлетворяют все строки 
таблицы. Например, следующие параметры сбрасывают текущий фильтр, посколь- 
ку пустая строка содержится в любой строке: 

<РАВАМ МАМЕ = "ЕИегСгиег! опт" УАТШОЕ = "=" 

<РАВАМ МАМЕ = "ЕИкегУа!ие" УАГОЕ = 
По умолчанию фильтрация данных чувствительна к регистру, в котором набран 
образец. Управлять зависимостью от регистра можно с помощью параметра Сазе- 
Зепзуе: 

<РАВАМ МАМЕ = "Сазезеп$1! {1уе" МАШЕ = значение> 
Атрибут МАЕ может принимать значения О/ бе (не зависит) или 1/хгиае (зависит). 


Для сортировки (упорядочения) данных используется следующий параметр: 
<РАВАМ МАМЕ = “"Зо{Соитп"” МАШУ, = "НМЯ_попа"> 

Сортировка строк производится по значениям АЗСП-кода значений заданного 

поля базы данных. Например, если мы хотим, чтобы фамилии располагались по 

алфавиту, необходимо записать: 
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<РАВАМ МАМЕ = “"Зо{Со!итп" МАШЕ = "Фамилия"> 
По умолчанию сортировка производится по увеличению значения АЗСП-кода 
символов. Однако порядок можно изменить на противоположный, если исполь- 
зовать следующий параметр: 
<РАКАМ МАМЕ=" 5 ог{Азсепатя" УАЦОЕ=0> 
Атрибут УАЦОЕЯ устанавливает режим сортировки, принятый по умолчанию. 
Элемент управления ЗТР предоставляет объект гесог4$е{, который поддерживает 
методы перемещения по строкам таблицы (по записям базы данных). Синтаксис 
следующий: 
1с1_объекта. гесог4$е+{ ‚метод 
Например, туаБ.гесог4$е.тоуеМехО перемещает указатель текущей записи на 
следующую запись. 
Методы перемещения по записям базы данных: 
. шоуеРгеу10$О — к предыдущей записи; 
. тоуеМехО — к следующей записи; 
. шоуеЕи$Ор— к первой записи; 
. тоуеГамО — к последней записи. 
Перед использованием методов тоуеМех{О и тоуеРге\у!1о$О следует проверять зна- 
чения свойств еоР (конец файла данных) и Бо (начало файла данных). Так, если 
текущей является последняя строка таблицы, то нельзя использовать метод 
тоуеМех(О. Аналогично, если текущей является первая строка, то нельзя исполь- 
зовать тоуеРгеу!1о$О. Разумеется, методы перемещения используются в сценари- 
ях обработки событий, таких как, например, щелчок на кнопке. Это необходимо, 
если на экран выводятся не все записи (строки) таблицы, а только одна запись 


Ц Пример Формы $ТО - Миегозоймегте!Ехр/огег 
|| файл "Правка Дид Избранное Сареис Справка Га | 
сы || Сопки № | Адрес: 


= » 


Фамилия [Иванов 


88 


Готово 2} Мой комгыктер 


И 


Рис. 4.30. Пример формы с полями ввода и просмотра данных и кнопками 
для перемещения по записям 
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(например, с помощью полей ввода). Перемещение по строкам таблицы исполь- 
зуется при поиске данных в соответствии с некоторым критерием и при их обра- 


ботке. 


Если использовать поля ввода (например, при создании формы для просмотра 
и коррекции данных), то привязку данных к ним можно осуществить с помощью 
следующего фрагмента НТМГ-кода: 

<ТВ><ТО> 

УМРУТ ТРЕ = "{ех{" ОАТАЗАС = #туабсоп\го! ОАТАРЫО = “Фамилия"> 

</ГО></ГВ> 
Обратите внимание, что атрибуты привязки данных ПАТАЗЖЮС и ПАГАНО совместно 
используются в одном и том же теге. В листинге 4.20 приводится пример НТМТГ- 
кода, который выводит на страницу одну запись базы данных с кнопками навига- 
ции (рис. 4.30). Здесь использовался тот же источникданных, что и в предыду- 


щем примере. 


Листинг4.20. Код, выводящий одну запись базы данных с кнопками навигации 


<НТМЕ> 

<НЕАБЕВ><ТИТЬЕ>прНМер формы $УТО</ТПЕЕ></НЕАВЕН> 
<ОВЧУЕСТ Ш = “тудбсопго!" 

СТА$$!Ю = "С1$10:333С7ВС4-460Е-1100-ВС04-0080С7055А83"> 
<РАВАМ ММЕ = "Ре!абейт" МАШЕ = “|"> 


<РАВАМ МАМЕ = “ОазфаЧ ВЕ” МАШЕ = “туаЬ.+4х+"> 
<РАРАМ МАМЕ = “"УзеНеа4ег” МАЦУЕ = 1гие> 
</ОВДЕСТ> 


<! Поля с данными> 
<ТАВЕЕ \ММОТН = 75%> 


<ТВ><ТН><$РаМНиНнЯ</ТН> 
<то> 
<ПМРОТ ТУРЕ = "{ех{" ПРАТАЗВС = #ту46сопго! РАТАНШО = "Фамилия" > 
</ГО></ТВ> 
<ТИ><ТН>Имя</ТН> 
<Тр><ПМРОТ ТУРЕ = "{ех{" ПАТАЗВС = #ту@сопго! ОБАТАНО="НМЯ"> 
</ТО></ТВ> 
<ТК><ТН>Фото</ТН> 
<Тр><5РАМ  ПАТАЗВС = #ту@Ьсошто! РАТАНО = "Портрет" ПРАТАРОВМАТА$ = 
"вай!"></5РАМ> 
</Тр></ТВ> 
</ТАВГЕ> 
<Р> 
<! Кнопки перемещения по записям 
<ПМРОТ МАМЕ = "сшаЕйг${" ТУРЕ = "ВОТТОМ" УАШОЕ = "<" 
опс11ск = "Е $4 О0"> 
<ПМРОТ МАМЕ = "сш@аРгеуюои$" ТУРЕ="ВОТТОМ" УАПЦОЕ="<" 
опсИск = “Ргемои$О“> 
<МРУТ МАМЕ=“стаМех{' ТУРЕ=“ВУТТОМ" \УАЦОЕ=">" 
опсИск = “Мех+()"> 


<ИМРУТ МАМЕ=“стаЁЬазЕ ТУРЕ=“ВУТТОМ” УАКУЕ=“>>" 
опс|ск = “Каз “> 


<5СВТРТ> 
ГапсИйоп Еи$О { // к первой записи 
туа6сопго1.гесогазее „шоуеЕйг$() 
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РапсНоп Ргемоц$О { // к прелыдушей записи 
И (! тудбсоп{го|.гесогазет.бот) 
тмуд6бсоп{го!|.гесогазе{.тоуеРгемюои$О 

} 

ТипсНоп М№хк) { // к следующей записи 
И (! тудбсотего|.гесогазет.еот) 


тмуЧБсоп{го!. гесогазет. помеМехЮ 


} 


ТипсНоп Ёа$1() { // к последней записи 
туадбсоп\го|.гесога$ет.томеЁа${() 

} 

</ЗСВТРТ> 

<тмр> 


Обратите внимание, что третье поле с именем Портрет содержит изображения, и по- 
этому мы показываем его не с помощью элемента <МРОТ>, а с помощью контейне- 
ра <ЗРАМ> с атрибутом ПАТАЮКМАТА$ = "Вит". 


ВНИМАНИЕ - 


Изменения данныхвтаблицесохраняютсятольковоперативной памяти компьютера и никак 
не влияют на содержимое текстового файла-источника данных. Чтобы обновить содержи- 
мое таблицы, необходимо отредактировать текстовый файл и перекачать его на сервер, 
как это обычно делается при модификации страниц сайта. 


Тем не менее рассмотренный здесь элемент управления ЭТО оказывается очень 
полезным для организации обновления содержания веб-сайта. Вместо того что- 
бы корректировать НТМГ-код всей страницы, выискивать в ней нужное место, 
вы можете редактировать только текстовые файлы с информацией, не занимаясь 
при этом вопросами композиции. Например, таким образом можно организовать 
разделы новостей сайта и текущей информации. В подразделе 4.8.7 будет рассмот- 
рена система поиска по сайту, основанная на использовании ТО. 


4.8.5. Сортировка данных таблицы 


Рассмотрим сортировку строк таблицы по значениям того или иного столбца. 
В нашем примере для сортировки необходимо просто щелкнуть на заголовке нуж- 
ного столбца таблицы. Для этого кроме элемента управления ЭТО и таблицы 
нам понадобится сценарий, содержащий функцию, обрабатывающую щелчок пу- 
тем модификации тега <ОВТЕСТ> (листинг 4.21). Здесь использован следующий 
хитрый прием. Сначала база данных показывается без всякой сортировки. Мы 
сохраняем блок тегов от <ОВТЕСТ> до </ОВЗЕСТ>, за исключением последнего, в пе- 
ременной 06]. При щелчке на заголовке таблицы вызывается функция сортиров- 
ки $оЦ(Не!а), которой передается имя поля. Эта функция дописывает к значению 
переменной об] строку, содержащую теги параметров, отвечающие за сортировку. 
Далее функция $01(() заменяет в НТМГ-коде теги <ОВЖТ> на те, которые содержат- 
ся в переменной об}. Это делается с помощью свойства ощеНТМЕ, При этом элемент 
управления ЭТО заново инициализируется с новыми параметрами. В результате таб- 
лица перерисовывается в соответствии с новым порядком следования строк. 


256 Глава 4. Примеры сценариев 


Листинг 4.21. Код сценария сортировки данных таблицы 


<НТМЕ> 

<ОВУЕСТ Ш = "тудабсоп(го!1" 

СТА$$ТШО = "СТ$1О:333С7ВС4-460Е-1100-ВС04-0080С7055А83"> 
<РАКАМ МАМЕ ' Е1е19ОеНшт" УАГОЕ="|"> 

<РАВКАМ МАМЕ ' Рафап0в!" УАГОЕ = "шуаЪ.ехе"> 

<РАВАМ МАМЕ 'ОзеНеааег" УАГОЕ = Егае> 

<РАКАМ МАМЕ "бог Сошши"  УАГОЕ"Фамилия"> 

<РАВАМ МАМЕ -— 'ЗокЕАзсепЯ1аа" УАГОЕ = 1> 

</ОВУЕСТ> 

<ТАВЕЕ ПАТАЗВС = Иту@6соп(го! ВОКРЕВ “ 5> 

<ТНЕАО> 

<ТН опс11ск = "вогеЕ ('Фамилия')">Фамилия сотрудника</ТН> 
«ТН 0пс11ск = "вогё('Имя') ">Имж/ТН> 

<ТН>Фото</ТН> 

</ТНЕАО> 

<ТК> 

<ТЬ><ЗРАМ ПАТАЕШО = "Фамил ия " ></ ЗРАМ></ТО> 

<ТЬ><$РАМ РАТАЕНШ = " Имя " >< / ЗРАМ></ТО> 

<ТОЬ><ЗРАМ ПАТАРНШ = "Портрет" ПАТАРОКМАТА$ = "Виш" > </ЗРАМ></ТО> 
</ТК> 

</ТАВЕЕ> 

<5СЕРТ» 

// Сохраняем теги объекта 5ПО в переменной 

уаг х = 4осишептЕ.аЙ.ту@сопго1.тпегНТМГ // теги, вложенные в 
<обесе> 

уах об) = '<ОВУЕСТ ТР = "пуабсорего1" СТАЗЯТО = 


"СЬЗТО:333С7ВС4-460Е-1100-ВС04-0080С7055А83">' + х 


Гипс ой зогЕ (11614) { // сортировка по значениям столбца Ме|!4 

уаг у = аоситепЕ.аП. туд сопёго!1 

у.ощегНТМТЕ = об} + '‘ЗРАВАММАМЕ = "бойСоатп" УАПОЕ" * + Неа + 
"></ОВТЕСТ>" 

} 

</5СВТРТ> 

</НТМГ> 


В этом примере сортировать данные можно только по первым двум текстовым 
полям. Вы можете в качестве упражнения усовершенствовать этот код. Напри- 
мер, сделайте так, чтобы при двойном щелчке на заголовке столбца таблицы сор- 
тировка происходила в противоположном порядке. Для этого необходимо не уста- 
навливать параметр <РАВАМ МАМЕ="бо“А$сепато" УАЦОЕ=О>. 


4.8.6. Фильтрация данных таблицы 


Для организации фильтрации данных из таблицы по заданному критерию исполь- 
зуется подход, аналогичный рассмотренному в предыдущем подразделе. В при- 
веденном ниже примере (листинг 4.22) в окно браузера выводится таблица с данны- 
ми и элементы, с помощью которых можно задать поле (столбец) и значение (образец) 
для формирования простого условия фильтра вида: имя поля = значение. 


Имя поля выбирается из раскрывающегося списка, а значение вводится с клавиа- 
туры. Для установки фильтра следует щелкнуть на кнопке Применить (рис. 4.31). 
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^4СЛМоияо».чмем1ыи5Лт,(1Ы | вап Мс0зой Пцегпее Ехр... РИ] х 
1'Файл Позвка Вив Избоанное Сеовис ° Справка” | | @ | 


* 


5" ^”| | Сеылкя "Адрес! 


Фильтр: 


Поле |^Рамилия :] 
бииааиы:_ АТИ 


Значение [петРов 


Г Ярименить 


8] Готово В) МЫ номеетр : ЖШ< 


Рис. 4.31. Пример таблицы с элементами для установки фильтра 


Если поле ввода значения пусто, то при щелчке на этой кнопке фильтр выклю- 
чится, а в таблице будут отображены все имеющиеся записи. Заметим, что ре- 
зультат фильтрации в данном примере не зависит от регистра, в котором пользо- 
ватель ввел значение. 


Также, каки при сортировке, мы сохраняем в переменной часть информации о па- 


раметрах элемента ЭТО, а затем модифицируем ее, чтобы учесть условие филь- 
тра. Для установки фильтра используется свойство още]НТМЕ, 


Листинг 4.22. Код для фильтрации данных таблицы 


<НТМЕ> 

<НЗ>Фильтр:</НЗ> 

Поле 

<! Раскрывающийся список имен полей > 
<ЗЕТЕСТ МАМЕ = "ЕЁ О 


<ОРТЮМ уаше =  "Фамилия">Фамилия 

<ОРПОМ уаше = "Имя">Имя 

</ЗЕЪЕСТ> 

<ВВ> 

Значение 

<! Поле ввода значения для фильтра и кнопка> 
МРОТ МАМЕ = "МР" УАШОЕ =" ТУРЕ = "{ехё"> 

<Р> 

<ВОТТОМ опс]1ск = "Е 1 Пего ">Применить< /В1ЛТОМ> 
<НВ> 


<! Элемент управления $П» ь 
продолжение =” 
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Листинг 4.22 (продолжение) 


ВУЕСТ Ш = "тудбсопи( го |" 
СТАЗЗШЮ = "С1$10:333С7ВС4-460Е-1100-ВС04-0080С7055А83"> 


<РАВАМ МАМЕ ="Е!е19)е|!т” УАЕОЕ=" | "> 
<РАВАМ МАМЕ = "“Ба{а0 ВЕ" УАШУЕ = "тудЬ.4{х{"> 
<РАКАМ МАМЕ = "О5еНеадег" УАЦОЕ = 1гие> 


</ОВУЕСТ» 
<! Таблица для вывода данных» 
<ТаЫе= РАТАЗКС = туа6соп( го! Богаег = 5> 


<ТНЕАО> 

<ТН>Фамилия</ТН> 

<ТН>Имж/ТН> 

<ТН>Портрет</ТН> 

</ТНЕАО> 

<ТВ> 

<ТО><5РАМ ПРАТАНШО = "Фамилия"></5РАМ></ТО> 

<ТО><5РАМ РАТАНШЮ = "Имя" ></5РАМ></ТО> 

<Тр><5РАМ ПРАТАНШ = "Портрет" РАТАЕОВМАТА$ =" ви РА! 

</ТВ> 

</ГАВГЕ> 

<5СЕТРТ> 

/* сохраняем основные параметры элемента $П> в переменной об] */ 

уаг об] = "<ЗОВЛЕСТ Ш = ‘'ту@сопего! 

06}+= — "СЁАЗ$ 10='С1$10:333С7ВС4-460Е-1100-ВС04-0080С7055А83'>" 

"<РАВАМ МАМЕ='Е!е!абейт’ \Маше = ‘')'>”" 

06]+= "<РАААМ МАМЕ=’',а4а/ АВЕ’ Маше = ‘тудБ.1хЕ’>" 

06]+= "<РАВАМ МАМЕ=' УзеНеадег уа!ие = {гие>" 

Гапсйоп ЁНЩег() { // установка фильтра 

уаг сраг = " // переменная для хранения параметров 

фильтра 

# ОМР.уаше){ // если введено значение 
| ‘ уаше = ' ). уа1ие+" 
сраг+= "Ффыаптете=АвАВие уа!ие = '"+1МР.уаше +" '> 
сраг+= "<рагат пате="Е\еиСтненоп" уаше = ‘=’ 


"<РАРАМ МАМЕ='СазеЗептз ме’ \МАШУЕ = Та!зе>" 


туд МЕ = об] + сраг + "</ОВДЕСТ>" 


и 

<НтмЕ> 
Для тренировки усовершенствуйте рассмотренный выше код таким образом, что- 
бы можно было выбирать оператор сравнения из раскрывающегося списка, атак- 
же устанавливать режим зависимости или независимости от регистра. 


4.8.7. Поиск по сайту 


Если ваш сайт содержит много страниц, то имеет смысл организовать поисковую 
систему. Здесь мы рассмотрим один простой вариант такой системы, использо- 
ванный на моем сайте. 


В основе поисковой системы положена база данных, содержащая соответствие 
между поисковыми образами (ключевыми словами) и ссылками на веб-страни- 
цы. Эта поисковая база данных создана в обычном текстовом файле, который в на- 
шем примере называется зеагсп.1х(. В ней всего два поля (столбца) с именами р! 
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и р2. Первый столбец содержит ключевые слова, а второй — ссылки на НТМГ- 
документы, в которых находятся соответствующие ключевые слова. В качестве 
разделителя полей в текстовом файле использовалась вертикальная черта. Таким 
образом, структура поисковой базы данных имеет следующий вид: 

м) 

ключевые _слова | ссылки 
Ниже приводится фрагмент поисковой базы данных для моего сайта: 


1|р2 

ы текстовая база данных ЭТО $ЗипрШе Таби!аг Ра{а|<а ге! ='450.иш'>База данных (5ТО)</а> 
Динамическая загрузка элементов|<а Пге!= 'спапде.Ит'>Динамическая загрузка элемен 

Е-таЙ ЕтаЙ Электронная почта|<а Пге{='тай „В+т’ >Электронная почта</а> 

Эллиптичекая траектория орбита движение эллипс |<а Пгеё='е1 1 1рзе.пи'>Движение по эллипсу</а> 
Звездные войны Космос|<а пге!='еШрзе.В4т' >Звездные войны</а> 

Подсветка мигание бордюр|<а пге!='Богдиг.П4т">Подсветка и мигание</а> 

Поиск по сайту карта сайта тар зеагсН|<а вге!='5еагсй. нп'>Поиск по сайту</а> 

Поиск в тексте поиск в текстовой области|<а пге='Йи@ехе.ви'>Поисккв текстовой @! 

АФП АЕР|«а Ите!“' ар. В4т'>АФП</а> 

выполнение выражения еуа|()|<а Пге{='еуа| „По’выполнение выражения в текстовой строке</а> 
книги книга Сам себе \уеб-дизайнер меБ-мастер|<а Пге[='тубоок. Вт '>Книги< /а> 


Здесь ключевые слова выбраны из заголовков и содержательной части текстов, 
расположенных на различных страницах сайта, посвященного веб-дизайну. На- 
пример, такие слова, как «БД», «текстовая», «база» и «данных», содержатся в файле 
Фо.Нет. Хотя эти же слова можно встретить и на других страницах моего сайта, 
я сделал так, чтобы поиск этих слов приводил именно к документу 460.В т. 


Прежде всего, необходимо тщательно продумать систему ключевых слов, чтобы 
поиск был эффективным. Затем следует разработать алгоритм работы поисковой 
системы. В частности, требуется рептить, будет ли поиск зависеть от регистра, в ко- 
тором пользователь ввел поисковый образ, выводить ли в качестве результата пер- 
вый найденный документ или выводить только список ссылок на все найденные 
документы ит. п. 


В рассматриваемом примере поиск не зависит от регистра введенного поискового 
образа. Система просматривает значения первого поля базы данных строка за стро- 
кой, проверяя каждый раз, содержится ли введенный пользователем поисковый 
образ в значении первого поля. Если да, то поиск завершается; в противном слу- 
чае он продолжается. Результат поиска выводится в виде ссылки на документ. 
Щелчок на данной ссылке выводит этот документ в окно браузера. Если поиск 
неудачен, то появляется соответствующее сообщение. 


Интерфейс поисковой системы прост: поле ввода поискового образа и кнопка для 
запуска процедуры поиска. Результаты поиска отображаются ниже, под полем 
ввода (рис. 4.32). 


Для работы с базой данных использованы два идентичных элемента управле- 
ния ТБ, связанные с одним и тем же текстовым файлом зеагс|.4х(. К каждому 
из этих элементов 5ГО привязана своя таблица. Одна из них, всегда невиди- 
мая, необходима для служебных целей, а именно для операции поиска по всей 
базе данных. Она содержит только поле ключевых слов р 1. Вторая таблица 
предназначена для отображения результатов поиска и содержит только поле 
ссылок р2. При загрузке документа эта таблица не видна и отображается только 
при успешном поиске. Такой прием обусловлен тем, что стандартные для элемен- 
та ЭТО средства фильтрации (операторы сравнения) слишком примитивны для 
наших целей (см. подраздел 4.8.4). Нам было необходимо организовать проверку 
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Начало \УеЬ- дизайн Графика Книги АФП Разное 


Гостевая Ето 9% 


1 #9 

Зи Я н восновном дня поддержки млчишмощихад*е1мИШЙиеров. 

Ас гегримеры использ ани; 1/ШнашквгшгпМ!М1-. *йшг№.чхмт. 
рассмаиривались 
мастер" (288<.}. Я ппанирую пополнять злу коннекцийк 

Эно сайт сам по себе является приг: ром; Конечно, не в смыс пе эталона для 
подбажания. Он слелан вручную {1.в. ++. с помошью Нот ?аое или Огеат\Аамег) так, 
\побы 7 1 и содержал типичны* 
злемени * саШ шярероа вдпальаовано в конетрзрадаи 
моего самта: так чта; зю все расотает! 


ПОИСК ПО С&0ту —  Вянваре 2003г / во * 
Агёб". написанная в соавторстве сс 


Рис. 4.32. Так выглядит интерфейс поисковой системы на главной странице сайта автора 


вхождения поискового образа в последовательность ключевых слов. Очевидно, 
что это недостижимо с помощью обычных операторов сравнения. Кроме того, мне 
не хотелось сбрасывать фильтр перед выполнением каждой операции поиска. 
В листинге 4.23 приводится пример кода поисковой системы. 


Листинг4.23. Пример кода поисковой системы 

<НТМЬ> 

<! Элемент управления для таблицы ссылок > 

<ОВУЕСТ 12 = '1па! 
СЕА$ЗЮ = 'СЕ510:333С7ВС4-460Е-1100-ВСС4-0080С7055А83'> 
<РАВАМ МАМЕ = 'РТе!ареЙт’ \МАШЕ= ' г 
<РАВАМ МАМЕ = 'ОааЧувАЕ’ УАЕОЕ='5еагсй.4х+ "> 
<РАВАМ МАМЕ '/зеНеааег’” УАЕЧЕ=Ние> 
<РАААМ МАМЕ = 'Сазебеп Шуе’ МАНОЕ=а!5е> 

</ОВУЕСТ> 


<! Элемент управления для таблицы ключевых слов > 
<ОВУЕСТ 10 = '#па2' 
СЬАЗУЮ = 'СЕ$10:333С7ВС4-460Е-1100-ВС04-0080С7055А83'> 


<РАВАМ МАМЕ = 'Е1е1аре11ш` УАБОЕ='|'> 
<РАВАМ МАМЕ = 'рафа0вь’ УАШОЕ= 'зеаксь. хе ' > 
<РАВАМ МАМЕ = 'веНеаег` УАБОЕ=Егие> 
<РАВАМ МАМЕ = 'Савебепз1Е1уе' УАГОЕ=ЁЕа1зе> 


<РАВАМ МАМЕ = 'СВагбее' УАШОЕ= 'и1паомз-1251'> 
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</ОВУЕСТ> 


<! Интерфейс поисковой системы > 
<! Поле ввода поискового образа > 


ТМРО ТУРЕ = "\ "” МАМЕ = "\ЮКО' УАЦЕ = "МЕ = 20% 
<! Кнопка запуска процедуры поиска > 
<ВИТТОМ опсИск =" "1 шаКеумога () ">поНСК</ВОТТО№<ВК> 


<! Здесь будет выводиться результат поиска> 
<В Ш = 'гези! ">< /В> 


<! Таблица ключевых слов > 

<ТАВЕЕ ЭМЕ = "м $16 ИТу: Гадет' > 

<ТВ> 

<ТЬ><1МРУТ МАМЕ = '1' РАТАЗВС = #92 ОАТАЕРШО = 'рИх/ТО> 
</ТВ> 

</ТАВЕЕ> 


<! Таблица ссылок > 

<ТАВЕЕ Ш = 'ту{аб’ РПАТАЗКС = #19 УОТН = 350 АМСМ = ТЕЕТ 
УМЕ = 'мз16Ину:шааеп' > 

<ТКВ> 

<ТО><СРАМ РАТАЕГО = 'р2 ' ПАТАРОВМАТАЗ = ' БЕТ ' ></5РАМ>< /ТО> 
</тв> 

</ТАВЬЕ> 


<БСВТРТ> 

уаг об) = "<ОВЧЕСТ ТР = Ера1 " 

03 +="СТАЗ5ТО= 'СЬ5ТО:333С7ВС4-460Е-1100-ВС04-0080С7055А83 ' >" 
оЬ3+="<РАКАМ МАМЕ='Е1е1а0е11ш' УАБОЕ='к>" 

оЬ3+="<РАКАМ МАМЕ='Рабаокг' УАГОЕ='зеакгсВ.6хе'>" 
оЬ3+="<РАКАМ МАМЕ='ОзеНеадег' УАГШОЕ=Егае>" 

оЪ3+="<РАВАМ МАМЕ='Сазе5бепз1Е1уе' УАБОЕ=ЁЕа1ве>" 


Еопсе1оп Е1пакеумогао { // поиск по введенному образцу 
1Е (ТМОВО.уа1ае) гебогп // если поисковый образ не введен 
уаг хЕТЕГ = "", у, сраг 


11 есога5е{ У. Г$Ё ( /* переход к 1-Й записи таблицы 
с ключевыми словами */ 
У11е 6!Тп92. ге Г ет.еот // пока не достигли конца таблицы 
у = Е!. уа1ае .ЕоГомегСазео 
1Е (у.1таехоЕ (МОВО.уа1ае .коГопегСазе()) >=0) { // проверка на вхождение 
хЕ1ег = Е1.уа1ае /* значение для 
формирования 
условия фильтра */ 
фгеаКк 


ТПО есогазет ‚ тоуемехт{) /* переход к следующей записи 
таблицы с ключевыми словами */ 


Е (ТХЕЛЕЕ) 
осимепт. ат. ге2и! ''"'еттехЕ = "Ничего не найдено" 
е15е 


аосишепе .а11.хге2а1е.1ппехТехе = " 


/* Формируем условие фильтра: */ 


сраг = 0) + "‹рахам паше = 'Е1Теёехбо1ащп' уа1ае = 'р1'> 
Сраг+= "‹рагашпащше = 'Е1ТеехСг16ег1оп' уа1е = '='>" 
сраг+= "‹рагам паше = 'Е1ТеехгУа1ае' уа10е = '" + хЕ1к + : ОВуЕСТ 


продолжение туУ 
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Листинг 4.23 (иродолжение) 


НМ = сраг /* устанавливаем фильтр 
в таблице ссылок */ 
Ну = "уе" // делаем таблицу ссылок видимой 
</5СВТРТ> 
</НТМГ> 


Функция поиска йпаКеумогаОсканирует записи базыданных, проверяя для каждой 
из них, содержит ли поле ключевых слов ф! введенный пользователем поисковый 
образ. Если результат проверки положителен, то переменной хй# присваивается 
значение поля ссылок р2. Это значение затем используется для формирования 
условия фильтра, а сканирование базы данных прекращается. Установка филь- 
тра производится с помощью присвоения нового значения свойству ощеНТМЕ эле- 
мента управления ЭТО для таблицы ссылок. После установки фильтра мы дела- 
ем таблицу ссылок видимой. Эта таблица будет содержать лишь одну ссылку. 


Итак, мы рассмотрели простой вариант поисковой системы. Его можно усовер- 
шенствовать по нескольким направлениям. Мы рассмотрим далее лишь одно из 
них. А именно, давайте сделаем так, чтобы система поиска сканировала все запи- 
си базы данных и выводила в качестве результата все ссылки, соответствующие 
поисковому образу, а не только одну первую найденную. Для осуществления это- 
го замысла нам потребуется один элемент управления ЭТО и одна невидимая таб- 
лица с двумя полями, и р2. Фильтрация данных нам не понадобится. Вместо 
нее мы просто будем формировать строку, содержащую найденные ссылки, кото- 
рую затем присвоим свойству И! п‹ ИМ объекта гезий. При этом код даже упро- 
щается по сравнению с исходным (листинг 4.24). 


Листинг 4.24. Код усовершенствованной поисковой системы 


<! Элемент управления > 


<ОВЛЕСТ Ш = ‘таг 
СТА$$ ШО = 'С1$10:333С7ВС4-460Е-1100-ВС04-0080С7055А83'> 
<РАВАМ МАЙЕ = 'Е!е!абейт' УАЕИЕ=!' |"> 
<РАВАМ МАМЕ = 'Ба{а/ВЕ’ УАЕГОЕ='зеагсп.{х{'> 
<РАВАМ МАМЕ = 'ОзеНеа4ег’ УАГОЕ=!' 
<РАКАМ МАМЕ = 'Сазебепз!1уе' УАГОЕ=Га15е> 
</ОВЛЕСТ» 


<! Интерфейс поисковой системы > 
<! Поле ввода поискового образа > 


ТМРИУ ТУРЕ = "{ех{" МАМЕ = '\ЮВО’ УАШОЕ = УЕ = 20> 
<! Кнопка запуска процедуры поиска > 
<ВОГГОМ опс!1ск = "ЯпаКеумога()" >Пои ВУТТОМ 


<! Здесь будет выводиться результат поиска> 
<В Ш = 'гели! > </В> 


<! Таблица поисковой базы данных > 


<ТАВГЕ ЗТИЕ = 'уу1$ ФТ 1 бу: 19 деп'> 
<ТК> 

РОТ МАМЕ = ' ' РАТАЗВС = #19] РАТАЕЬО = '"р1' ></ТЬ> 
<ТО><ТМРОТ МАМЕ = РАТАУВС = #191 РАТАРЬО = 902. ' 
РАТАРОВМАТАЗ = ""БЕщ"></ТО> 
</ТВ> 


</ТАВЬЕ> 
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<УЭСНРТ> 
Гопсйоп  Йп@Кеумога() { // поиск по введенному образцу, 
Е  (МОКОхаме) теги // если поисковый образ не введен 


уаг хгега{ = "", у 
+п91 . гесогазе! . момеЕ1г$+ ( // переход к 1-й записи таблицы 
%ВИе (!!191.гесогд$ее.еоГ){ // пока не достигли конца таблицы 
у = ИП. узаше. {о ГомегСазе 0 
Н (у. ш@ехО\О КО. уаще бо ГомегСазе ( )>=0){ // проверка на вхождение 
хге7и1{+= {2.уаше +"<ВЕ>" // формируем строку ссылок 


П переход к следующей записи таблицы 


И (хгези Е, 


''егНТМь = "Ничего не найдено" 
е1 зе 
Чосишепе.а11. ге2и1е. 1ппегНТМЬ = хге7и16 
</5СВТРТ> 
</НТМИ> 


4.8.8. Вставка НТМЕ-документа в таблицу 


Документ из внешнего НТМГ-файла можно вставить в таблицу, находящуюся 
в текущем документе и управляемую элементом ТО. Эта возможность основана 
на том, что НТМГ-файл является обычным текстовым файлом. Поскольку в пер- 
вой строке этого файла указывается тег<НТМ1 >, мы можем использовать его в ка- 
честве имени поля базы данных. Признаюсь, эта простая мысль не сразу пришла 
мне в голову. Видимо, сказался стереотип образования имен переменных. 


Таким образом, мы рассматриваем вставляемый НТМГ-файл как базу данных 
с единственным полем (столбцом). Основное требование к содержимому НТМГ- 
файла: любой контейнерный тег должен полностью размещаться в одной строке 


этого файла. 
Рассмотрим сначала пример вставки в таблицу одного НТМТГ-документа: 


«НТМЬ "> 
<! Элемент управления > 


<ОВЕСТ Ш = 'муфеовто!’ 
СТА$5 = 'С1510:333С7ВС4-460Е-1100-ВС04-0080С7055А83'> 


<РАВАМ МАМЕ = 'Не@Оейш’ УАГОЕ='|'> 
<РАВАМ МАМЕ = 'БааОКГ’ УАГОЕ='мудосим. ии" > 
«РАКАМ МАМЕ = 'ОзеНеайег’ УАГОЕ=Ние> 
</ОВТЕСТ> 
«ТАВГЕ ПАТАЗВС = #щу@сопто! УМОТН = 350 


«ТК 
«ТЬ><$РАМ РАТАЕД = '«НТМШ ПАТАРОВМАТА$ = ‘Ви ' ><] ЗРА№></ТБ> 


</ТВ> 

</ТАВГЕ> 

</НТМЬ 
Здесь предполагается, что в документе тег <НТМГ> записан прописными буквами. 
Если же он записан строчными буквами, то это должно быть отражено и в значе- 
нии атрибута ОАТАНО = "<>". Очевидно, вы можете задать атрибуты оформле- 
ния таблицы (рамок, выравнивания, цвета и т. п.), а также стилевые параметры 


позиционирования. 
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Теперь рассмотрим случай вставки нескольких НТМТ-документов. В листин- 
ге 4.25 приведен сценарий, который это выполняет. 


Листинг4.25. Код сценария вставки нескольких НТМЕ-документов 


.<ЭСНРТ> 
/* Вставка НТМГ-документов */ 
/* Массив имен (ОВО) вставляемых НТМГ-файлов */ 


уаг апг|! = пем Аггауо 
аи! [0] = "Бат. Вт” 
аиг! [1] = "Ваш2 Ве" 
уаг фа0\ат=800; /* ширина таблицы, в которой будут показаны 


НТМЕ-документы */ 
/* Массив частей троки, определяющей элемент управления 51 */ 


уаг хоб]есё = пем ре 

хоб]ес([0] = 388: | //14 

хоБ]ес([1] = "" СТАУТ" СЕ: 1-41 ›0-8С04-00 

хо] "ес [1] = '«РАКАММАМЕ = "Ре бенш" УАГОЕ = "|">' 
хо}ес( |] += <РАВАММАМЕ = "О5еНеа4ег" УАЦОЕ = +те>' 
хоб]ес(|1] += ‘РАКАММАМЕ = "Сваг5её" УАПОЕ = ‚"зтдоз-1251">' 
хов}есё [1] += `ЗРАВАММАМЕ = "ОавОВГ"” УАЦОЕ =" 


хоБ]ес([2] = "'></ОВЛЕСТ>" 


/* Строка тегов таблицы */ 

уаг х{аб = пем Аггауо 

хаб [0] = '<ТАВГЕ УШТН=' + таб\14н + ' РАТАЗВС = 

х{1аб [1] = 'ХТВХТОХ$РАМРАТАЕГО="<наш>" 'РАТАРОКМАТА$= " Ваш" > ' 

хаб [!] += '</ЗРАМ></ТО></ТАх/ТАВЬЕ>" 

уаг зоб) = ""; 

юг (1=0; 1 < ацх1.1епаеВ; 1++) { 

$05) += хою]есё [0] + 1 + хоЪ] есё11] + ацг1[1] + хоб]есё[2] + хаб [0] + 
‘1 905] "+1 + хжаьЕ1] 

| 

доситептЕ.угКе($001) 

</5СВТРТ» 


Для пробы возьмем следующие два простых НТМГ-документа: 
ФайлНет!.Вит: 


<«НТМЕ> 
<НЗ>Документ  1</НЗ> 
<ппазе зге="Го1ег. 21">3ЗТо - просто картинка 


<а Виз! > "Описание баз данных в текстовых файлах</а> 
<БиНоп опсИск=" а!ег{('Привет!! ИК о - кнопка 
</НТМЕ> 
Файл Вит .Ват: 
<НТМЕ> 
<НЗ>Документ 2</НЗ> 
<1>Это - содержание документа из второго файла.<1> 
В нем только этот текст 
</НТМТ> 


Тогла НТМГ-документ, содержащий лишь приведенный выше сценарий, будет 
выглядеть в окне браузера, как показано на рис. 4.33. Диалоговое окно с привет- 
ствием появляется при щелчке на кнопке Щелкни. 


Вы можете разместить в основном документе элементы управления (ссылки, кноп- 
ки), с помошью которых в одну и ту же таблицу будуг загружаться различные 
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Документ 1 


О это - просто картинка 
Опксанпе,, баз данных в текстовы Й1 


Целкния. 1 2 
ЦЕ ЛИКЫНА Эт ик 5 


Документ 2 


Это - содержание документа из второго файла. 


В нем только этот текст Месгозой: иМегпе! Езравг ° Ш, 


Рис. 4.33. Результат вставки НТМ!-документов втаблицы 


НТМЕ-документы. Для этого необходимо соответствующим образом изменять 
значение параметра РааоВГ. 


Рассмотренный выше способ является еще одним средством (помимо плавающих 
фреймов <ЗЕКАМЕ>) вставки НТМТ-документов, осуществляемой на стороне кли- 
ента, то есть браузером пользователя, а не сервером. 


ВНИМАНИЕ = - — 


В отличие от плавающихфреймов, этот способ не столь универсален. При его использова- 
нии следуетучитывать, в каком регистре записан тег <НТМЕ> во вставляемом документе, 
атакже следить затем, чтобы контейнерные теги (а их подавляющее большинство в НТМЕ) 
записывались целиком в одной строке (без переносов). 


4.8.9. Обработка табличных данных 


Нередко в базах данных хранят некоторые первичные данные, а отображают на 
экране (или используют как-то иначе) результаты их обработки. Обычно обра- 
ботке подвергаются числовые данные. Например, требуется вычислить сумму всех 
значений столбца таблицы или найти максимальное или минимальное значение. 
Бывают и более сложные задачи. В любом случае для их решения удобно, прежде 
всего, считать обрабатываемые данные из таблицы в массивы, для которых 
в ЛауазсирЕ предусмотрены многочисленные методы обработки. Дополнительно 
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к этим методам можно создать свои специальные функции обработки. Некото- 
рые из них были рассмотрены в подразделе 1.7.2. 


Рассмотрим задачу считывания значений столбца таблицы в массив. Если табли- 
ца с данными полностью создана с помощью тегов НТМЕ (без использования 
элемента управления ЭТО), то задача считывания проста. В этом случае требует- 
ся с помощью оператора цикла присвоить элементам массива значения ячеек таб- 
лицы из заданного столбца. Пусть, например, элемент <ТАН! Е> имеет Ш = "туба", 
и требуется считать в массив все значения столбца с индексом п. Далее предполо- 
жим, что содержимым ячеек этого столбца являются числа, и мы собираемся про- 
изводить числовые операции над элементами массива. Поскольку содержимое 
ячеек таблицы имеет строковый тип, постольку при считывании сразу же вос- 
пользуемся функцией рагзеНоа*О или рагзеш{О. Ниже приведен сценарий, реша- 
ющий поставленную задачу: 

туаггау = пемАггауО 

Тог(Г = 0; 1< аоситем. а! .туаь. гомз .1епод{й; 1++){ 

туаггау[!] = рагзе[!оа+ еп! устар. гом$ [1] 

} 
Здесь мы использовали для преобразования в числовой тип функцию рагзе Ноа*О, 
чтобы сохранить дробную часть числа. Когда массив чисел создан, можно приме- 
нить к нему статистическую обработку с помощью, например, функции $(а1$сО, 
описанной в подразделе 1.7.2. 


Теперь рассмотрим задачу считывания в массив значений столбца таблицы, уп- 
равляемой элементом 5ТО. Как известно, источником данных для такой таблицы 
является текстовый файл. В листинге 4.26 приводится пример НТМГ-документа 
с элементом управления ЭТО, таблицей и сценарием, производящим чтение дан- 
ных из столбца с одновременным переводом их в числовой тип, атакже вычисля- 
ющим сумму всех значений. 


Листинг4.26. Пример НТМЕ-документа с элементом управления ТО 


<НТМЬ> 
<! Элемент управления > 
<ОВЛЕСТ Ш = 'тшудавасоштоГ 
СТАЗЗО = 'С1$10:333С7ВС4-460Е-1100-ВС04-0080С7055А83'> 


<РАВАМ МАМЕ = 'Е!е!абе|т’ УАГИЕ=' |'> 

<РАВАМ МАМЕ = 'ОБаёа9 ВЕ’ УАЕОЕ='тудата.+1х+'> 

<РАВАМ МАМЕ = ‘'УзеНеааег’ УАГОЕ=Ние> 
</ОВУЕСТ> 


<! Таблица > 
<ТАНЕ Ш="туйа"> 
<ТВ> 
<ИМРИТ ММЕ = '7р’ ОАТАЗАС = #тудаёасоп\го! 
РАТАЕРЬО = ‘Зарплата’ опспапде = "трсНапдеО"> 
<ло> 
<! Здесь может быть определение других столбцов таблицы» 
</ТВ> 
</ТАВЬЕ> 
<Р> 
Сумма выплат <В Ш = "зит"></В> 


<5СВРТ> 
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уаг а7тр = пе\у Аггау() 
| // вызов функции 


ГапсНоп 7рсвапзе О { 
уаг5 = 0, 1 = 

| ОА. // переход к 1-й записи 
уве ( | пудатасопего! .гесогазеЕ.ео1[) { 


айр [1] =  рагзе 10а (доситетЕ.а1!1. туба Ь.7тр.уа|ше) 
5+= а7р[1!] 
пуда (го } р // переход к следующей записи 
14+ 
} 
| шиепе. а1. зит. + ппегТехё = 5 // вывод значения 5 
} 
</ЗСВТРТ> 
</НТМЕ> 


Здесь предполагается, что источник данных находится в файле тудайа.1х(. В этом 
файле указано поле Зарплата, а поля разделены вертикальной чертой. Чтение дан- 
ных поля Зарплата и вычисление суммы всех его значений происходит при загруз- 
ке документа в браузер, а также при каждом изменении в этом поле. Результат 
вычисления суммы 5 вставляется как текст в заранее подготовленный для этой 
цели элемент <В Ш = "зит">. 


4.8.10. Защита веб-страницс помощью пароля 


Если мы хотим защитить сайт или его отдельную страницу с помощью пароля, то 
главное — обеспечить сохранность пароля, а также адреса защищаемой страницы. 
Очевидно, они не должны фигурировать в НТМГ-документе и сценарии в явном 
виде. Достаточно простой и надежный способ решения этой задачи — совпадение 
пароля с именем (без расширения) какого-нибудь файла, расположенного на сер- 
вере. В этом случае к слову, введенному пользователем, следует добавить расши- 
рение имени файла и проверить, существует ли он на сервере. Если файл суще- 
ствует, то введенный пользователем пароль верен, и можно открыть доступ 
к документу. В противном случае будет отказано в доступе. Обратите внимание, 
что имя файла в явном виде не упоминается. Проверку существования файла 
можно выполнить с помощью метода ЕЦеЕх!55О объекта файловой системы (ЕПе 
ЗуетОЫес!), который рассмотрен в главе 5. Однако использование этого объ- 
екта в сценарии для браузера сопряжено с появлением неприятного сообщения 
о том, что страница содержит элемент АсйуеХ, который может представлять опас- 
ность. При этом пользователю предлагается принять решение о выполнении про- 
граммы. Если он откажется от ее выполнения, то не получит доступа к защищае- 
мой странице. 


Другой вариант решения задачи защиты с помощью пароля тоже основан на 
совпадении пароля с именем файла. Однако в этом варианте используется не объ- 
ект файловой системы, а безопасный элемент АсНуеХ управления текстовыми 
базами данных. Файл с именем, совпадающим с паролем, является текстовым 
файлом, содержащим базу данных с двумя столбцами (полями) и двумя строка- 
ми (записями). В первой строке записаны идентификаторы полей базы данных, 
между которыми указан символ-разделитель. Во второй строке через такой же 
разделитель тоже записаны всего лишь два слова — имя этого текстового файла 
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без расширения и имя НТМ!-файла или ОВГ-адрес страницы перехода. Пусть 
поля базы данных имеют идентификаторы разз\ога и тузресий! Тогда содержи- 
мое текстового файла с именем, например, тузресШе.сх{ должно иметь следую- 
щий ВИД: 

раззмога]пузресиг1 

пузресЕ11е | ВЕЕр: / /иии.мумеь. ги /пураде. Ем 
Здесь во второй строке во втором ее поле указан гипотетический ОЕГ-адрес стра- 
ницы, на которую должен перейти браузер, если пользователь введет правиль- 
ный пароль. 


В следующем примере в НТМ!Г-документе размещается текстовое поле ввода 
и кнопка, щелчок на которой обрабатывается сценарием (листинг 4.27). Сцена- 
рий создает элемент управления и невидимую таблицу, загружая в нее базу дан- 
ных. В этой таблице всего две ячейки: одна с паролем, адругая с адресом перехо- 
да. Далее слово, введенное пользователем, сравнивается со словом в таблице. Если 
они совпадают, то происходит переход на страницу с указанным адресом. В про- 
тивном случае выдается сообщение о том, что введенный пароль неверен. 


Листинг 4.27. Сценарий защиты НТМЁ-документа с помощью пароля 


<Н3З>Только для членов клуба</НЗ> 
Введите пароль: 


МРОТ Ш =”рм" ТУРЕ="ех{" УАПОЕ=""> 
<ВОТТОМ ТР = "риепеег">ВвоЕ1< /ВОТТОМ> 
<В ТО = "аЪе1ет"></В> 
<ЭСВТРТ> 
Еопсе1оп риепеег.опс11сК() { 
1Е д тепт.а у // если поле ввода пароля пусто 
тесагп 
ЧзЕг = '<ОВУЕСТ ТО = "мудЪсопе го!" ' + 
'СЪАб5ТО= "С1510:333С78ВС4-460Е-1100-ВС04-00806С7055А83">' + 
'<РАВАММАМЕ= "Рафа0вЬ" УАГОЕ = '" + аосишепе. а11.рм] .уа1ае+ '.6хе"> ' + 
'<РАВАММАМЕ="Е1е190е11щ" УАЦШОЕ=" |"›' 
'<РАВАММАМЕ = "Озенеадег" \УАГОЕ = 1ги: ВЕСТ + 
'<ТАВЬЕ СТУГЕ = "у181Ъ1116у:В1а4еп"><ТВ><ТО>' + 
*«ТМРОТ 12 = "ри2" ТУРЕ = "бехё" ПАТАЗРС = "#щу@рсопетго1"' + 
'РАТАЕЬО= "раззмога"></ТО><ТО>' + 
ГМ ТО = 'х!)г1" ТУРЕ = "бехё" РАТАЗВС = "ЕРтуаБсопетго1" ' + 
'РАТАЕШО = "музресиг1"х/ТО></ТВх/ТАВЬЕ>' 
\ т.а 1Бе1‹ егНТМ 4551 /* вставляем элементы БД 
в документ */ 
зееТ1теойЕ ("уа11Ч9ае1опО", 1000) // задержка 
} 
Ро оп уа|ПданопО { // проверка правильности и переход, 
И  (ЧосишевЕ. а П.ряГ.уаше == фосишеве, а. ру2.уа[ше){ /[* если пароль 


верен */ 
досишепт{.аП.рм1.уаше = "" 
н1пдом , 1осафтоп.пгеф = еп! 1.хи уа1ие // переход, 
}е1зе // если пароль не верен 
а1ег® ("Пароль не верен!") 


</3ЗСВТРТ> 
</НТМЫ> 
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Здесь использована временная задержка в | с, необходимая для того, чтобы брау- 
зер успел сделать вставку элементов с помощью свойства шпеНТМГ до проверки 
пароля. Обратите внимание, что нигде в документе значение пароля, а также ад- 
рес страницы перехода не упоминаются в явном виде. 


При желании рассмотренный выше сценарий можно усовершенствовать. Так, если 
введенный пользователем пароль оказался верным, то его можно сохранить 
в соове-файле, с тем чтобы при следующем посещении страницы пользователю 
не пришлось снова его вводить. Об этом уже говорилось в разделе 2.9. Например, 
в загруженном в браузер документе имеется ссылка на защищенную паролем стра- 
ницу. При щелчке на этой ссылке сценарий считывает из сооКе-файла значение 
специальной записи, содержащей пароль. Далее в документ загружается соответ- 
ствующий текстовый файл базы данных с паролем и производится проверка пра- 
вильности пароля из соое-записи. Если эта проверка оказалась успешной, то 
происходит переход по ссылке, указанной в базе данных (ссылка в документе 
не должна содержать адрес перехода в явном виде). В противном случае в те- 
кущем документе появляется поле и кнопка для ввода пароля с клавиатуры. 
Введенное пользователем слово сравнивается с паролем из базы данных. Если 
они совпали, -тю нужная страница загружается в браузер, а пароль сохраняется 
в сооке-записи. В противном случае выдается сообщение, что введенный па- 
роль неверен. 


В листинге 4.28 приведен пример НТМГ-документа со сценарием, который пыта- 
ется взять пароль из сооК!е-записи с именем тузрестесога. 


Листинг 4.28. Пример НТМЕ-документа со сценарием, который пытается взять пароль 
из сооке-записи 


«НМ > 
<НЗ>Только для членов клуба</НЗ> 
<а Втеё="#" ТО -='щугеЕ"опс11сК="риуа114() ">Щелкни</а> 
<В Ш = "аре1ет"></В> 
<ЭСВТРТ> 
уаг ру /* глобальная переменная для полученного 
из сооке или введенного пользователем пароля*/ 
псНоп рууаНа(){ // проверка пароля 
ру! = геавСооке( ') // читаем сооюе-запись 
# (м) /“ нет нужной записи 
в соое-файле */ 
ру = рушри О /* делаем поле ввода и кнопку, 
вызывающую рмещегО */ 
е1зе 
/* загружаем БД, сравниваем и 
что-то делаем */ 
} 
РапсНоп рушри(){ /’ поле ввода и кнопка 


уаг 1пру{г = 'Введите пароль: <ПМРОТ Ш = "ря!" ТУРЕ = "{ехё" УАЦУЕ = "' 
'<ВИТТОМ опсИск = "м = фситеп+.аП.рм.уаше; рметщег() ">Ввод 
</ВУТТОМ>' 


} 


КипсНоп рметег(){ 


‹ енНТНЕ = трэш // вставляем поле ввода и кнопку 


продолжение & 
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Листинг 4.28 (продолжение) 
о (м // если нет пароля 
тегага 
9$ = 'ЗОВЛЮСТ Ш = "ту@сопего]" СТАЗУО = 
"СТ$1О:333С7ВС4-460Е-1100-ВС04-0080С7055А83">' + , 


<РАВАММАМЕ = "РабаовЬ" УАГОЕ = "'’ + ри + '.6х6"> ' + 
'<РАВАММАМЕ="Е1е190е11щ" УАЦШОЕ="|">' + 

<РАВАММ МАМЕ = "ОзеНеааег" УАТОЕ = т гие></ОВОЕСТ><ТАВЬЕ СТУШЕ = 
"у18151116у:Б1Адеп"><ТВ><ТО>' + 

'<ТМРИТ ТР = "ри2" ТУРЕ = "бехё" ПАТАЗВС = "Е Етудфсопего1" ПАТАЕГО = 
"раззмога"></ТО><ТО>' + 

МРОТ ТР = "миг1" ТУРЕ = "бехё" ОАТАЗВС = "ЕЕмуаБсопЕто1" ПАТАРЬО = 


"пузресиг1"></ТО></ТВ></ТАВЦЕ> ' 
пепф.а Бе пп ТМ Е // вставляем элементы в документ 
п ] )) // задержка 


} 


Еопсе1оп уа11Чаетопо { // проверка правильности 
// и переход 


1Е == досищеп! 2. у р // если пароль верен, 

1ом.1 = -@ 1 3] хи! уа1 ие // переход 
уаг Ч= пеи Паке() 

уаг 92=а.деет1ще ()+(365*24*60*60*1000) 


// срок хранения соок1е-записи 


у ( ‚ ри, а) // запись пароля в соок1е-файл, 
}е1зе // если пароль не верен 

а1ег® ("Пароль не верен!") 
п 
ЕорсЕ1оп геад ‹ е) { // чтение соок1е-данных записи 
уаг хпаше = паше + 
уаг х1еп хпапе. 1епчЕь 


уаг с1еп = Ядосишепе. соок1е.1епа ЕВ 
уаг1=0 


м611е(1 < с1еп) { 


уаг = 1+ ме 

1Е (аосишепе. соок1е . ви65%х119(1, 3) == хпаме) 
тесиги деЕСоок1еУа1 (3) 

1 = досишепе .соок1е.1паехоЕ(" ",!) + 1 


1Е (1 == 0) ‚хеак 


тебогп пи11 


БорсЕ1оп деЕбоок1е\Уа1 (п) { /* вспомогательная функция, 
вызываемая из геа@Соок1ео ) */ 
уаг епазЕг = Чосишейе. соок1е. 1г хот ( „ п) 
1Е (епазег == -1) 
епазЕг = @осишепе. соок1е. 1епдевВ 


тегигп ипезсаре (досишепЕ . соок1е. зирзЕг119(п, епавзег)) 


} 


Еорсетоп = | [ ‚ уае, ехр1гез, раб, Яота1п, зесоге) { 
/* запись соок1ле */ 
Чосимепе .соок1е = 
паме + "=" +езсаре (уа1ае) + 


и 


| Г + ехрЕ ге МТУ! | ЗЫ + 
((раёй) ? "; раё=" + ра : "") + 


4.9. Взаимодействие с НазН-мультфильмами 271 


') ? "; допат=" + дотам : "") + 
((зесиге) ? "; зесиге" Е 
</ЭСНРТ> 
</НТМЕ> 


Функция уаПЧайоп() в этом примере по сравнению с предыдущим несколько мо- 
дифицирована: помимо проверки правильности пароля и перехода по заданному 
адресу она производит запись (перезапись) соое. Срок хранения здесь устанав- 
ливается равным 1 году с момента текущей системной даты. Функции чтения 
стад Сооке и записи м\еС оок1е() данных в сооКе-файл рассматривались в разде- 
ле 2.9. Далее в сценарии используется глобальная переменная р\ для хранения 
пароля, либо полученного из сооке-записи, либо введенного пользователем. Эта 
переменная используется в функциях рмирЮ,() руещег() и уйваюЮ. п ()_ Я допус- 
каю, что приведенный выше код не очень изящный (многовато функций), но он 
работает, поэтому я и решил не заниматься дальнейшими усовершенствова- 
ниями. Однако я рекомендую вам попытаться улучшить сценарий. 


Тот факт, что имя файла (без расширения) базы данных и значение ее поля раз$\ога 
совпадают со значением пароля, существенно усиливает защиту. Действительно, для 
доступа к защищенному документу необходимо не только существование на сервере 
файла с именем, совпадающим с паролем, но и чтобы этот файл со) держал-данные в 
определенной структуре. А именно он должен содержать свое имя-пароль. Очевид- 
но, далеко не всякий текстовый файл обладает таким свойством. 


С точки зрения идеологии парольной защиты веб-страниц сама собой напраши- 
вается следующая модернизация рассмотренных выше сценариев. Пусть пароль 
совпадает с именем файла текстовой базы данных, но сама база содержит несколько 
записей. В первом столбце базы данных записан не пароль, а условные имена 
пользователей (Гош). На загруженной в браузер веб-странице пользователь вво- 
дит свое имя (1021) и пароль. Далее в текущий документ загружается невидимая 
база данных из текстового файла с именем, совпадающим с введенным паролем. 
В этой базе производится поиск записи, соответствующей имени пользователя. 
В случае успеха поиска в браузер загружается документ с адресом, указанным во 
втором поле. Таким образом на сайте можно хранить, например, индивидуальные 
сообщения для пользователей вашего клуба. 


Заметим, что текстовый файл с базой данных паролей создается и поддерживает- 
ся автором (владельцем) сайта. Он размещается на сервере вместе с другими фай- 
лами сайта. Пароль передается посетителям по электронной почте или телефону. 


4.9. Взаимодействие с На$п-мультфильмами 


Приложения, созданные в системе Масготе а Н1азВ версий 5.0 и 6.0 (МХ), могут 
взаимодействовать со сценариями на Лауа5ст!р:. А именно они могут получать 
данные из сценария, написанного на языке Гауа5 ст!р®, и использовать их некото- 
рым образом с помошью своего сценария, написанного на языке Асйоп$ сре. 
С другой стороны, сценарии на Асйопз$сп!рЕ могут использовать сценарии (функ- 
ции) на/]ауа5спире. Чтобы организовать такое взаимодействие, необходимо преж- 
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де всего вставить приложение НазВ (мультфильм, ролик, клип) в НТМ!-доку- 
мент. Это делается с помощью контейнерного тега <ОВТЕСТ>, инициирующего 
Назв-проигрыватель и загружающего в него мультфильм. В 1Е5+ этот проигры- 
ватель уже встроен. 


4.9.1. Передача данных из Чауа$сир{ в АсНоп$сир: 


В качестве примера передачи данных из Лауа$сир в АсНоп$с1ре рассмотрим за- 
дачу отображения текста в окне Е!азН-мультфильма. Используя большие изобра- 
зительные возможности Наазв, можно создать окно произвольной формы, а не толь- 
ко прямоугольное, как в НТМГ. В нашем примере НТМГ-документ содержит 
НазВ-проигрыватель с загруженным в него мультфильмом, поле ввода данных 
и сценарий, который передает во НазВ-мультфильм содержимое поле ввода. При 
этом содержимое поля ввода данных (элемента <ПМРОТ>) отображается в окне 


Назв-мультфильма (рис. 4.34). В листинге 4.29 приведен соответствующий 
НТМГ-код. 


ТПередача из /ауасйре в Назй = Мегозой иегле! ЕхЫокя =! 


Ш Правка Бид Избранное Сервис Справка #7} 
>. Эва эм а Ра | 


Г ыы —- - ый и 


| = 
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Рис. 4.34. Текст в поле ввода (<ИМРУТ>) оттображается в окне НазН-мультфильма 


Листинг 4.29. Пример передачи данных из УамаЗспрЕ в АсНоп5Зс!ре 
<НТМЬ 
<НЕАО> 


<теа ПВИр-еашу = Сошеп{-Туре сопепЕ = "{ех{/Вт1;  сПагзеё = 
Утдо\$-1251"> 
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<ТтЕ>Передача из уауаЗсир{ в НазН</ИТЕЕ> 
<ИНЕАО> 
<ВОБУ ВССОГОВ = "#е0е0е0"> 


<! НазВ-проигрыватель > 


<ОВЛЕСТ СГАЗЗШ = "с151а: 227СОВбЕ-АЕбО-Пс{-96В8-444553540000" 
СОРЕВА$ЗЕ = 
"БЕЕр: / /аомп1оаа . ЕЁЕ1аскотшеЯ1а .сош/раь/5ВосКмауе / саЪз / Е1азЪ / 
5\Е1азЪ .саБ#уегз1оп = 6,0,0,0" 
ИМТОТН = "287" НЕТСНТ = "261" 1а = "пуЕазЬ" АЦТСМ=""> 

<РАВАМ МАМЕ = поу1е УАГОЕ = "шуЕТавЪ .вмЕ"> 


<РАВАМ МАМЕ = сфа116у УАГОЕ=Ь198> 
<РАВАМ МАМЕ = ммоае УАГОЕ = Егапзрагепе 
<РАВАМ МАМЕ = Босо1ог УАБОЕ=#ЕЕЕЕЕЕ> 


<ЕМВЕР сгс = "шуЕ1азВ.змЕ" апа116у=Ь1а9Ь зтоде=Егапзрагере Басо1ог = 
#ЕЕЕЕЕЕ МТОТН = "287" НЕТСНТ = "261" МАМЕ = "пуЕТазЬ" АШТСМ = "" 
ТУРЕ = "арр11саЕ1оп/х-зБоскиауе-Е1азь" 
РЬОСТМ5РАСЕ = "БЕбр: / /ммм.шаскошеа1а .сот/дчо/чеЕЕ1азЬр1ауег"> 

</ЕМВЕО> 

</ОВОЕСТ> 

<Р> 

Введите текст в поле, и он отобразится во’ 1аэ-п-муль.фильме<ВК> 

<ТМРОТ ТУРЕ = "6бехё" МАМЕ = "1праббехе" 5Т7Е = 40 опсбапде = деё1е()> 

</ВОПУ> 

<ССВТРТ> 

Еапсе1оп дее1е(){ 

аосптепе .шуЕТазВ.5е\М аг1аЪ1е ("11Е1азЪ", 1прибеехе.уа1ае) 

} 

</ЗСВТРТ> 

</НтТМЬ> 


Здесь с помощью тега <ОВТЕСТ> в браузер загружается элемент управления Асйуех, 
соответствующий НазВ-проигрывателю версии 6.0 (МХ), хотя для воспроизведе- 
ния нашего мультфильма достаточно и версии 5.0. В этот проигрыватель, в свою 
очередь, загружается мультфильм из файла туНазВ.5\Р. Атрибут СОБЕВАЗЕ тега 
<ОВТЕСТ> содержит в качестве значения ОВГ-адрес проигрывателя, если он не 
встроен в браузер пользователя. Заметим, что в 1Е5+ НазВ-проигрыватель уже 
встроен. Вложенный контейнерный тег <ЕМВЕО> используется только ради брау- 
зера М№е5саре Мауеаюг. Далее в НТМГ-документе с помощью тега <ПМРОТ> зада- 
ется поле ввода данных. При изменении значения этого поля (событие опсвапзе) 
вызывается функция $е1(), определенная в сценарии Лауа5ст!ре. В этой функции 
с помощью метода ЗеУапае() переменной шЕЙазВ присваивается значение поля 
ввода данных шрийех.уаше. Этого вполне достаточно, чтобы передать значение 
поля ввода данных в мультфильм. Метод ЗеУапае() является методом объекта 
Назв-проигрывателя, который вданном примере имеет Ш = "шуЙазв". Имя пере- 
менной шЕ[азВ (произвольное) задается как один из параметров НазВ-мультфиль- 
ма. Среди прочих параметров мультфильма отметим еше <РАВАМ МАМЕ = уутоде 
УАЦУЕ = бапзрагеп":»., который задает прозрачность фона занимаемой им прямо- 
угольной области. Это простой и весьма эффективный способ согласования со- 
держимого НазВ-мультфильма с общим дизайном веб-страницы. 


Теперь рассмотрим, как сделать НазВ-мультфильм, воспринимающий и отобра- 
жающий данные из НТМГ-документас помощью сценария, написанного наязыке 
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]ауабсире. В пакете Масготефа НазВ МХ создадим простой мультфильм, содер- 
жащий два слоя. В первом, фоновом слое нарисуем окно. Это может быть любая 
фигура. В нашем примере я использовал инструмент Овал, чтобы нарисовать эл- 
липс. Затем с помощью инструмента 9% 5е|ес Поп (белая стрелка) я преобразовал 
эллипс в некую причудливую форму, напоминающую облако. Болеетого,язалил 
ее радиальным градиентом. Далее необходимо создать второй слой, расположен- 
ный над первым. В этом слое в пределах «облака», с помощью инструмента Тех 
создается текстовое поле, параметры которого определяются в палитре РгорегИе$ 
(Свойства). Эта палитра во Назй МХ еще называется Инспектором свойств. Сна- 
чала зададим тип текстового поля — при Тех (Ввод текста). Затем в поле Уаг (Пе- 
ременная)введемимяпеременной, принимающейтекст,которыйдолженотобра- 
жаться в текстовом поле. В рассматриваемом примерея выбрал имя переменной 
`пНазв, Это важный момент, поскольку именно эта переменная указывается в сце- 
нарии ЛауаспрЕ как первый параметр метода Зе УапаеО} Наконец, с помощью 
других органов управления палитры РгорегИе$ задаем дополнительные парамет- 
ры текстового поля (рис. 4.35). В частности, выбираем из раскрывающегося спис- 
ка имя шрифта, режим отображения текста Ми Ште (Многострочный) идр. 
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Рис. 4.35. Создание НазН-мультфильма, отображающего текст из НТМЕ-документа с помощью 
сценария на уауаЗсир{. Внизу — палитра Ргоре@ез 
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Исходный файл созданного мультфильма сохраним под именем туЙазВ.Йа. Это 
необходимо, если нам потребуется в дальнейшем модифицировать его. Для вставки 
мультфильма в НТМГ-документ необходимо создать файл в формате ЗУ Е, то есть 
файл с расширением .5\. Этой цели служит так называемая операция публика- 
ции мультфильма Ри 151, которая выбирается из меню НЕ (Файл) в главном окне 
пакета НазВ. Параметры публикации можно задать по команде ЕйЙе У Риб$В Зе 125 
(Файл ь Настройка публикации). В соответствующем диалоговом окне можно задать 
имя $\Ё-файла, версию НазН-проигрывателя и другие параметры. Вы можете так- 
же потребовать создание НТМГ-файла, который содержит фрагмент НТМГ-кода 
(элемент <ОВЛЕСТ>), загружающий Н1азв-проигрыватель и мультфильм со всеми 
параметрами, указанными в диалоговом окне настроек. Этот фрагмент можно 
просто скопировать в создаваемый НТМГ-документ вашего проекта. 


4.9.2. Вызов сценария Чауа$сир{ из сценария 
АсНопЗсире 


Язык АсНоп$‹спре для создания сценариев Назв-мультфильмов достаточно 
мощное средство программирования, поэтому он может обойтись и без Лауазси!ре. 
Тем не менее существует возможность вызывать фрагменты Лауа5спри-кода из 
сценария, написанного на Ас|йоп$ сир". Это удобно в тех случаях, когда у вас уже 
созданы программы на/ЛауаЗсире. Например, зачем писать код функции представ- 
ления чисел словами на Асйоп$сирё, если он уже написан (см. раздел 4.4) на 
Тауа5ст!рЕ? 


Вызов функции ]Лауазсире из сценария АсЧоп$сире осуществляется следующим 
образом: 
детовВЕ("ауазсг!р{: имя_функции(параметры)") 


В нашем примере Еазп-мультфильм содержит три кнопки, щелчки на которых 
обрабатываются функциями, написанными на]ауаЗ спирт. Если уж быть точным, 
то щелчок на кнопке в мультфильме обрабатывается сценарием на АсйопЗспрь, 
который вызывает функцию на Лауа5ст!ре. 


НТМГ-документ содержит тег<ОВУЕСТ>, загружающий Назв-проигрыватель вме- 
сте с мультфильмом, и сценарий, в котором определены три функции: открытия 
нового окна, вывода диалогового окна с сообщением и закрытия окна. В листин- 
ге 4.30 приведен соответствующий код. 


Листинг4.30. Вызов сценария уауаЗсйр! из сценария АсйопЗсире 

<НГМЕ> 

<НЕАО> 

<шеа В Ир-еадшу = Сошщеп{-Туре сотепЕ = "{ехЕ/БЕт1; 
срагзеё = узшдом$-1251"> 

<ТИТЕ> Вызов Л] ауазсг!рЕ из АсЕ 1о0п5сг 1рЕ< /ТИТЬЕЕ> 

</НЕАО> 

<ВОРуУ ВССОГОВ = "#едедео"> 

<! Е1азб-проигрыватель > 

<ОВОЕСТ СТАЗСТО = "с131а:027СоВ6бЕ-АЕбО-11сЕ-968В8-444553540000" 
СОРЕВАБЕ = "Бр / /аомп1оаа. тасгоше@1а . с оп/руаЬ / зВоекмауе /саЪз /Е1азВ/ 
змЕ1азЪ .саЪ#уегз1от = 6,6,0,0" МТОТН = "400" НЕТСНТ = "100" 11а = 
"пуЕ1азЬ" АБТСМ= ""> продолжение 
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Листинг 4.30 (продолжение) 


<РАВАМ МАЙЕ = шоу1е УАШОЕ = "муЕ1азВ.зиЁ"> 
<РАВАМ МАМЕ = ала116у УАБОЕ=В198> 
<РАВАМ МАМЕ = мшоде УАГОЕ = +гапзрагеп®^ 


<РАВАМ МАМЕ = [9с01ог УАШОЕ=#ЕЕЕЕЕЕ> 

<ЕМВЕО 5з:с = "пуЁЕ1азВ.зиЁ" аца116у=6196 имоде=гапзрагепе [9со1ог = 
#РЕЕЕЕЕ ИТОТН "287" НЕТСНТ = "261" МАМЕ = "муЕ1авВ" АБТСМ = ' 
ТУРЕ = "арр11саё1оп/х-зВоскиауе-Е1азвН" РГОСТМ5РАСЕ = 
"ВЕБр: / /мми. маскомей1а , сом / до / де 1азВр1ауег"> 

</ЕМВЕО> 

</ОВЧЕСТ> 

</В00У> 

<ЭСВТРТ> 


уаг пуи1пдон 

Еипсё10оп пеии1пдои(вубвь, муи1аёН, муве198е){ /* открытие нового окна */ 

пуи1паои = м1 паои.ореп(щудВЫ, 'зар1е', | боо1фаг=поа Баг=по, Поса\ ‹ 
епибаг=п. Ст Ба! ‚ гезхае=по, миоН”” + тумоИ + 

‚ педит=" + тупеюм +“, тюр=0, 1е{ц=0") 

Т 

ЕорсЕ1оп мезвзаде (пеззаде) { // вывод сообщения 

а1ег& (меззаде) 

Т 

РАпсйоп 4озеутаомО{ // закрытие окна 

пумипаом 

тумтао\м.с105е() 


{ ВсмРТ> 

</НТМГ 
Во На$В-редакторе создадим простой мультфильм, содержащий три кнопки. Для 
этого можно воспользоваться встроенной библиотекой, содержащей множество 
уже готовых элементов управления. Каждой кнопке назначим следующие дей- 
ствия (сценарии): 


Кнопка 1 (открытие окнаизагрузкавнегофайлайетр.пит): 


оп(ге!еазе) { 
де10АЕ("/ауазсг!рт: пемммтаом(Четр.т’, 550, 250)") 


} 
Кнопка 2 (вывод сообщения): 
оп(ге!еазе) { 
де0АЕ(”/ауазси!р{: теззаде(”Привет из ЕР!азН’)") 
} 


Кнопка 3 (закрытие окна): 


оп(ге!еазе){ 

деиАЕ(“ауазсир{: — соземипаомО") 

| 
Исходный файл созданного мультфильма сохраним под именем туйаМа. Это 
необходимо, если нам потребуется вдальнейшем модифицировать его. Для вставки 
мультфильма в НТМГ-документ необходимо создать файл в формате Э\Е, то есть 
файл шУ 1а$1.5. Этой цели служит операция публикации мультфильма Ра ИЗ, 
которая выбирается из меню Не (Файл) в главном окне пакета ЕМазВ. Параметры 
публикации можно задать по команде Ее > РиабИзВ Зе е$ (Файл > Настройка пуб- 
ликации). В соответствующем диалоговом окне можно задать имя $\{-файла, вер- 
сию НазВ-проигрывателя и другие параметры. 


Глава 5. Работа с файловой 
системой и реестром \\ЛИпдо\!$ 


Операции с дисками, папками и файлами с помощью программ являются очень 
важными для программистов, поскольку серьезные проекты невозможны без вза- 
имодействия с файловой системой (создание, перемещение, удаление папок и фай- 
лов). В ТауазЗсире эти операции имеют некоторые особенности по сравнению 
с другими языками. 


Доступ к файловой системе с помощью языков на основе сценариев, таких как 
]ауа5сг!ре и УВ$спри, в \УМш9о\з обеспечивается через объект ЕЙебуметОесе 
(ЕЗО — объект файловой системы). Программы на/]ауа5сире и УВ5сирф, исполь- 
зующие этот объект, могут интерпретироваться браузером ТЕ5+, а также систе- 
мой У!!190о\$ 5сирИпе Но (\У$Н), встроенной в У! 9домз 98 ЗЕ и более позд- 
ние версии (ее также называют \УМш4о\з Вазе4 Зсирё Ноз®. 


Операциям с файловой системой, выполняемым браузером пользователя с по- 
мощью сценариев, даже при установленном самом низком уровне безопасности 
будуг предшествовать предупреждающие сообщения о возможных неприятностях. 
Предупреждения будут появляться и при работе на локальном ‚компьютере без 
использования сети. Это сделано для того, чтобы недобросовестные посетители 
Интернета не могли нанести вред компьютеру пользователя. Именно поэтому 
рекомендуется использовать Е$О не на клиентском компьютере, а на сервере (тех- 
нология АсИуе Зегуег Рагез, АЗР). \/ЗН, в отличие от браузера, позволяет сво- 
бодно использовать ЕЗО на локальном компьютере: вы просто создаете програм- 
му на /Лауа$сирЕ в текстовом файле с расширением }з и выполняете ее с помощью 
так называемого сервера сценариев УЛп4ао\з (файл \зспреехе, расположенный 
в папке \т9до\з$). Эта программа устанавливается по умолчанию как приложе- 
ниедля открытия (выполнения) файлов с расширением}. Аналогичная программа 
для запуска сценариев через командную строку М5 ПОО$ представлена файлом 
сзспреехе. 


Следует иметь в виду, что некоторые антивирусные пакеты (например, Моцоп 
АпНУит$) позволяют и рекомендуют устанавливать блокировку сценариев. Если 
блокировка установлена, то, в зависимости от настройки, сценарий не будет вы- 
полняться либо будет выводиться окно с предупреждением и предложением вы- 
бора возможных вариантов действий (например, запретить выполнение, разре- 
шить выполнение один раз или всегда и др.). 


Программы /Лауа$ сир, написанные для выполнения браузером и У\ЗН, во мно- 
гом похожи. Однако имеются и различия. Так, сценарии для браузера размеща- 
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ются в НТМГ-документе (обычно в контейнере <5СВТРТ>) или вБ-*райле. Про- 
граммы для У\УЗН размещаются только в]з-файлах. Для вывода сообщений в брау- 
зере используется, например, метод а&епО. В \5Н такого метода нет. Вместо него 
там применяется метод У/ЗспрЕ ЕспоО, отсутствующий в браузере. Есть и другие 
различия. 


При работе с файловой системой и реестром УЛпдо\з следует соблюдать осто- 
рожность, поскольку можно нечаянно не только потерять ценные данные, но и по- 
вредить операционную систему. 


5.1. Создание объекта файловой системы 


Итак, чтобы получить доступ к файловой системе, необходимо создать для нее 
объект ЕШебуще тОБ]ес{ (точнее говоря, экземпляр ЕЗО). Если ваша программа на 
]ауаЗсире будет выполняться браузером как сценарий в НТМГ-документе, то для 
создания ЕЗО можно использовать только следующее выражение: 

уаг 150 = пем Асй\е) ‹ ет 


Если программа предназначена для выполнения с помощью УЗ$Н, то кроме ука- 
занного выше выражения можно использовать еще и такое: 
уаг Бо = У& 

Здесь Бо — переменная (ее имя может быть произвольным), содержащая ссылку 
на объект файловой системы. Эта ссылка будет использоваться для применения 
методов и свойств объекта файловой системы. В дальнейшем мы будем приме- 
нять первый вариант создания ЕЗО, поскольку он подходит и для браузера, и для 
У/ЗН. Заметим, что первый вариант соответствует вызову объекта ЕЗО как эле- 
мента управления АсйуеХ, а второй — как объекта приложения У№зсир!. Но на 
этих деталях мы не будем здесь останавливаться. 


После того как объект файловой системы создан, можно применить методы для 
создания и удаления папок и файлов, копирования и перемещения файлов, атак- 
же получения информации о дисках, папках и файлах. Существуют и другие ме- 
тоды, такие как открытие и закрытие файла, запись данных в файл ит. п. Мы рас- 
смотрим их в следующих разделах данной главы. Общий же синтаксис таков: 


Ссылка на объект файловой системы (ЕЗО) для доступа к ее объектам: 
уаг Во = пе\м Ас +1 уеХОЫ 1 

Методы доступа к существующим объектам и методы создания новых объектов: 
уаг х = Бо.методОбъекта(параметры) 

Свойства и методы конкретного объекта — диска, папки или файла: 


уаг у = х.свойство(параметры) 
уаг г = х.метод(параметры) 


Например, для получения информации о свободном пространстве на диске С сле- 
дует выполнить следующий код: 


уаг 150 = ААВОСЗОООЕВевтОо | узтет( ) // ссылка на РЕЗО 
аг а = 150.Се{Оиуе("С") /* ссылка на объект 

с характеристиками диска С */ 
уаг Неезрасе = ООВ // значение свободного пространства в байтах 
\ // вывод. сообщения 
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Подробности будуг изложены в следующих разделах данной главы. При этом об- 
ратите внимание, что ряд методов ЕЗО разбивается на две группы: Се-методы 
и Сгеже-методы. Названия методов из той или иной группы начинаются либо с Се, 
либо с Сгеже. Ое-методы предназначены для получения ссылок на уже существу- 
ющие объекты (56 — получить). Стеже-методы предназначены для создания объ- 
ектов (стеже — создать). Однако методы создания возвращают ссылку на создан- 
ный объект. Поэтому если вы создали объект Сгеже-методом, а затем вам нужна 
ссылка на него, то лучше сохраните ссылку, возвращаемую Сгеаж{е-методом в пе- 
ременной для дальнейшего использования, а не применяйте Се-метод. Оконча- 
тельно понять смысл всех этих наставлений вы сможете, когда столкнетесь с на- 
писанием программы, в которой необходимо то создавать объекты файловой 
системы, то получать информацию о них. Общее правило следующее: Се-мето- 
ды работают для уже существующих объектов, а Стеже-методы, кроме создания 
новых объектов, обеспечивают вам и доступ к этим новым объектам, такой же как 
и Се{-методы. 


5.2. Работа с дисками 


Работа с дисками заключается в получении информации о них (объем свободно- 
го пространства, тип, готовность и т. п.). Мы не можем, разумеется, ни создавать, 
ни удалять диски. Информация о дисках важна, например, при создании папок 
и файлов. При создании, копировании или перемещении файла полезно сначала 
убедиться, что указанный вами диск существует, готов к работе и имеет достаточ- 
но свободного пространства. Знание серийного номера диска может использовать- 
ся, например, при решении задачи защиты программных продуктов от несанкцио- 
нированного копирования. 


Сначала создается объект ЕЗО для доступа к файловой системе, и ссылка на него 
сохраняется в переменной, например о. Далее используются методы и свойства 
для получения информации о диске. Пусть переменная ара содержит букву, 
которой обозначен диск, или путь к какой-нибудь папке, начинающийся с буквы 
диска. Тогда метод Бо.СеОнуе(рай) возвращает ссылку на объект, содержащий 
информацию о диске, указанном в ара. Пусть эта ссылка сохранена в перемен- 
ной 4. Теперь остается только получить значения свойств этого объекта, которые 
являются характеристиками диска. Например, свойство 4.1$Кеаду равно {гие, если 
дискготов, и#а15е —в противном случае. Свойство 4. Егее Зрасе содержит величину 
свободного пространства на диске в байтах. Чтобы определить, существует ли 
указанный в ара диск, необходимо применить метод Ёо.ОиуеЕх15 5 (ара). Этот 
метод возвращает 0, если диск не существует, в противном случае — 1. 


Ниже приведен код функции АпуешЮ(4ра), которая возвращает массив всех ха- 
рактеристик диска, указанного в качестве строкового параметра: 


ТипсНоп г! уешт о(аратй) { // информация о диске 
// Возвращает массив характеристик диска 

уаг 150 = АсиуехОощеск"Зсирита.РЕИеЗуетО]ес!{") 

уаг 4$К = 1$0,Бегро имеМате (ара) // имя (буква) диска 
уаг Чштто = пем Аггау(7) 

й (150.0имеЕх!${$ (91$К) ) { // если диск существует 
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уаг 4 = {50.@еОпймуе (а $К) // объект с информацией о диске 
д1п10[0] = 9, Ог1уеет // буква диска 
Ч1пРо[1] = 49.1зВеаду // готовность диска 
9110[2] =а.Ог1уеТуре // тип диска 
1 (4.1$Веаду) { 
Ч1пРо[3] = а4.Уошштемате // имя диска 
ЧтРо[4] = а. 5еча Митъег // серийный номер диска 
ат{Го0о[5] = а.Тота131ие // полный объем в байтах 
АтРо[6] = 4.Вгеебрасе // свободно в байтах 
тегаги ат возвращение массива характеристик 
диска */ 


Обратите внимание, что некоторые характеристики диска мы получаем только после 
проверки готовности диска (например ‚гибкий диск установлен в дисковод). Мы ис- 
пользуем выражение уаг 415К = Бо.СеОпуеМате(ара) на тот случай, когда параметр 
функции содержит не просто букву диска, а путь к папке или файлу. 


Чтобы протестировать функцию АпуешЮ(ара), напишите следующий код: 
ТипсНоп айуешпто(ара{й) { 
// код функции 


\ММ$ сгЕрт.Еспо (Апме!пТо ("А") 
\ММ$ сгЕрт. ЕсНо (Аг!ме!тТо ("С") 
\ММЗсг!р{.Еспо (ап! ме!тТо ("О") ) 
\ММ$ сгЕрт.Еспо (аг!ме!тТо ("Е") 
\ММ$ сг!р{.Еспо (апме!пТо ("С: \ 
уаг х = апуе!пто ("С") 
\М/Зст!р+.Еспо( "Свободно: " +х[5]) 

Сохраните этот код в файле с расширением] и выполните его (дважды щелкните 


на этом файлев Проводнике). 


Функция апуеТо{аЦШаЮ(4ра) (пример см. на рис. 5.1), код которой приведен в 
листинге 5.1, ничего не возвращает, а выводит диалоговое окно с характеристика- 
ми одного или всех дисков. Так, в качестве строкового параметра можно указать 
один интересующий нас диск. Однако если параметр не указан или пуст, выво- 
дится информация обо всех дисках. 


Листинг 5.1. Код функции апмеТоаюю(арай) 


ТипсНоп апуеТофаУпто(ара{п) { // Информация о дисках 

уаг #30 = пем АсНуехОв]ес+("Зсирта.ЕИебузетОв]ес{") 

уаг а $К 

! (!драёв) /* если нет параметра, 

то все диски */ 

41$К = пе\м Аггау ( "А", "В", "С", "О", "Е", "р" КИ Е 

е1зе 

Ч1$К = пем Аггау (150.Се{ОпмуеМате? | И) ) // одноэлементный массив 

уаг $ = "", $, 

Тога = 0; | < а45к.1епдаей: 1++){ 

И (150.ОимеЕх! $1$(91$К [1] )) { // если диск существует 
Ч = 150. Сене (а1$К[!] ) // ссылка на диск 
змИсй (а. ОимеТуре) { // тип диска 


сазе 0: { = " - неизвестный"; БгеаК 
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сазе 1: 1 = - съемный"; бгеак 
сазе 2: += " - несъемный Ьгеак 
сазе 3: + = - сетевой"; Бгеак 
сазе 4: {+ = - СО-ВОМ"; Бгеак 
сазе 5: + = - виртуальный"; Бгеак 


$+= "Диск " + а. Опуегеег + " 


и (94.15Кеаду) { 
5+= а „УошшеМаше + 1 
$+= "\п $М№: " + 4. ЗемчаМишБег 


$+= "\п Объем: ‘" + 4.То{а1511е 
$+= "\п Свободно: + а. ЕгеезЗрасе 
}е15е 
+= {+ " не готов" 
+= "\п\п" 


| 


Мет рЕ. Еспо(3) 


/ буква диска 


если диск готов 


’ имя диска 


серийный номер диска 


’ полный объем в байтах 


свободно в байтах 


вывод строки 
с характеристиками */ 


Чтобы использовать функцию апуеТоаШЮ(ара) в сценарии, выполняем'ом 
браузером, необходимо лишь заменить в ней выражение У сир. Есро($) наа1ет(($). 


Диск А: — съемный 


ем1 1154 
ВОбодно : 545230 


Диск с ;!к несъемный 
“107550428 

Объем: 3932176384 

свободна ; 1754148864 


Диск 0: -— насъе» 
5№:241702614 
Объем: 1С'5194240 
Сетбодно: $26195963 


ДискЕ: =-несъемнвый 
УМ: 99359:732% 
26 ъ1м:;2503770112 
Сесйодда: 1290444300 


Диск НУАГ/М-1 - СО-ВОМ 
5: 5634419 
Свъм: 10594064 


СЕСЙОДЬЮ; О 


ДНей с: —* СО-НОМ не готсе 


} 
| 


} 
—_———_ 


| 
| 
1] 


Рис. 5.1. Пример результата работы функции аймеТо{а!п() 
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5.3. Работа с папками 


В этом разделе мы научимся создавать папки и работать с ними. 


5.3.1. Создание папки 


Для создания папки можно использовать следующий код: 

\уаг 30 = пем Ас мехОЦесе (" 

т30о.Стгеа{еРо!аег(о!4егра{й) 
Здесь о1Аегра — строка, содержащая полный путь к создаваемой папке, напри- 
мер “"С\\Мои документь\\моя папка". Обратите внимание, что при указании пути 
требуется использовать двойные слэши. Напомним, что для выполнения с по- 
мощью У"/5Н вместо первого выражения можно использовать и такое: 

уаг Бо = \5с 


Второе выражение, ЁКо.СтежеЕо!4етг(о{4егра), создает указанную папку и возвра- 
щает ссылку на нее, если операция прошла успешно. В противном случае выво- 
дится диалоговое окно с сообщением об ошибке. 


Если требуется создать папку, то необходимо, чтобы существовали все папки бо- 
лее высокого уровня, лежащие на пути к создаваемой папке и указанные в пара- 
метре Ро14егра®. Кроме того, диск, на котором создается папка, должен быть запи- 
сываемым и готовым к работе. Например, это не может быть устройство для чтения 
компакт-дисков, а если это гибкий диск, то он должен быть вставлен в дисковод. 
Наконец, если папка, указанная в о|4егра , уже существует, то ее нельзя созда- 
вать. Таким образом, чтобы создать папку, предварительно следует выполнить 
целый ряд проверок. В противном случае, при невыполнении оговоренных выше 
условий, появится диалоговое окно с сообщением об ошибке. 


Влистинге 5.2 приведен код функции сгеа(еЕо14ег(о14егра{1), которая выполняет 
все необходимые проверки. Более того, если какие-нибудь папки на пути к конеч- 
ной (целевой) папке не существуют, то функция создаст их. Таким образом, вам 
не придется заботиться о существовании папок вышестоящего уровня. 


Листинг 5.2. Код функции сгеаеРодег‘юдеграй) 


ТипсНоп // создание папки 
/* Возвращает: -1. если папка создана или существует, и в - в поотивном 


* 


случае 

уаг [50 = пем АсбуеХОЩеск" Зет ето! Е") 

уаг 413К = @@ // имя (буква) диска 

/* Проверка характеристик диска: */ 

Е Г тега ‘ // если диск не существует 
ие Н $К) . 15Веаду) гебиги 0 // если диск не готов 

// Если не подходит тип диска: 

И (150.беиме( И К) .БимеТуре == 0 || 150.беби ме (91 зК). ОгуеТуре == 
4) 

теитги 0 

Е (Бо.Се(Опуе(91$К).Егеебрасе< 1024) геаги 0 // если мало места 
Е (Ко. РоЧетЕх1$13 (Ро!Четра®)) тгеигп -| /* сеслис палка. уже 


то не создаем ее */ 
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уаг арай = Юегра.зр("\5") // преобразуем в массив имен папок 
Тог(Г = 1; {| < ара{и. 1епо\и; 
@зк+= в + ми 
Е <! // если папка не существует, 
\Чег(915$К) // то создаем ее 
> 


гаигп 150. Ро!4егЕх!$1$(То|4егра{") /* возвращаем результат проверки 
существования созданной папки */ 
} 
Здесь дополнительно проверяется наличие свободного пространства на диске. Мы 
требуем, чтобы диск имел минимум 1 Кбайт свободного места, чтобы разрешить 
создание папки. Вы можете задать и другую пороговую величину или отменить 
эту проверку совсем. 


5.3.2. Копирование, перемещение и удаление папки 


Для копирования, перемещения и удаления папки используются следующие ме- 
тоды объекта файловой системы. 


.  СоруЕоег(ЮГАегра, Ю1егра!*! |, переписать]) — копирует папку, указанную 
в строке ю!4егра 1, в папку, указанную в строке Ю14егра 12; если третий не- 
обязательный параметр имеет значение (гие, то уже существующая папка 
ЮеграП7, с тем же именем переписывается. 


. МоуеЕо!аег(Ро1Аегра 1, Юегра7,))) — перемещает папку, указанную в строке 
Го|4егра Ш], в папку, указанную в строке Ю9еграв И. 


‚ РаезеЕо14ет(Ко1Чегра |[№с]!) — удаляет папку, указанную в строкеЮ1етра; 
если второй необязательный параметр имеет значение {гие, то удаляется и пап- 
ка, предназначенная только для чтения. 

Примеры 
уаг о|Чегра{и! = "СЛ\\Мои доукменты\\Те511" 
уаг о!Чеграйн2 = “С\\Тез{2" 
уаг #50=пем АБО ес") // объект Е$0 
/* Создаем папку С:\Те${2\ Мои ета * | 
‚ Ю4егра{2) 
9 т УдаЙЯм папку С\Тез2 */ 
30о.Бееего!аег(1о!Чегра{ 12) 
у Создаем папку Е РИез\ Мои доукментыХТез!! */ 
{ ] "С\\Ргодгат ЕНе5“”) 


Так же, как и в случае создания папки, при практическом копировании, переме- 
щении или удалении папки необходимо сначала убедиться в том, что это действи- 
тельно можно сделать. Следующая функция выполняет ряд проверок и в случае 
положительного результата удаляет папку: 


ТипсНоп аеееРо!дег(То!дегра1й){ // удаление папки 
/* Возвращает 

0, если папка удалена или не существует, и 

-1 - в противном случае * 
уаг 150 = пем АсНуехощескК"Зсиртоа.ЕНезуетОес{") 
Й (!50.Ро|егЕх!$1$ (То|4егра{Н)) гит 0 —// если папка не 

// существует 

уаг 015К = 5) | // имя (буква) диска 
// Если не подходит тип диска: 
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1Ё (Езо.Сеерк1уе (41зК) „Ог1уеТуре ==0 || Езо.СеЕ0х1 уе (91 зК). )у1 уеТуре == 

4) 

тебити -1 

$ бе1е+еРо19 Го1 9 | удаляем папку 

тегагп [50.Е019егЕх!$ 15 (Го14егра\) —/* возвращаем результат проверки 
существования созданной папки */ 

} 


Напишите в качестве упражнения аналогичные функции для копирования и пе- 
ремещения папок. 


5.4. Работа с файлами 


Вы можете создавать, удалять и перемещать текстовые файлы, а также читать их 
содержимое и характеристики, записывать в них данные. 


5.4.1. Создание текстового файла 


Чтобы создать текстовый файл на диске, следует выполнить следующие выраже- 
НИЯ; 

уаг №50 = пем АсИуехоОес{("Зсирита.ЕНеЗу<етОес{") 

150. СгеаааежЕУе (1 Цера{п") 
Здесь Шерай — строка, содержащая полный путь к создаваемому файлу, напри- 
мер "С\М ои ЯОКуМеНТЫ\\ЦезШе. 1хЕ". Обратите внимание, что при указании пути 
требуется использовать двойные слэши. Напомним, что для выполнения с по- 
мощью УУЗН вместо первого выражения можно использовать и такое: 

уаг №0 = Убсг!рЕ. Сгеаве ОБ] есЕ("Зсгрит?. ЕПеЗуз{ет ОБуесЕ") 
Второе выражение, фо.СгежеТех Е е(Йерав), создает указанный файл, открывает 
с доступом для записи и возвращает ссылку на него, если операция прошла ус- 
пешно. В противном случае выводится диалоговое окно с сообщением об ошибке. 
Обратите внимание, что созданный файл остается не доступным для записи. 


Второй способ создания текстового файла основан на применении метода Ореп- 
Тех ЕЙе (открыть текстовый файл) с параметром режима открытия Еа\\И йе (для 
записи). Этот параметр имеет значение 2. Это делается следующим образом: 


уаг 150 = пем Асй\уехов]ес{(" Зсг!рт Е11еъузтетоь 

уаг {+ = 15о0.ОрепТех{ЕПе (1Нера{п, 2) 
Новый текстовый файл, созданный описанными выше методами, ничего не со- 
держит. Наполнение его данными производится специальными методами, кото- 
рые будут рассмотрены в подразделе 5.4.3. Там же вы познакомитесь с методами 
чтения данных из уже существующего текстового файла. Обратите внимание, что 
создаваемый и открываемый для чтения или записи текстовый файл совсем не 
обязательно должен иметь расширение 11. Он может иметь расширение пет, Ви11, 
Вет, }з, азр, рге или др. Главное, чтобы он был текстовым по своему типу. 


На практике при создании файла на диске прежде всего необходимо убедиться 
в возможности это сделать, чтобы избежать появления сообщений об ошибках. 
Так, если хотя бы одна из папок в пути к файлу не существует, то попытка приме- 
нить метод СтеаеТехЕЙеО приведет к ошибке. Ошибка возникнет и в случае него- 
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товности диска, отсутствия указанного дисковода, а также в случае, если это 
устройство для чтения компакт-дисков. В листинге 5.3 приведен код функции 
стежеЕие(@ера®), которая выполняет все необходимые проверки. Кроме того, со- 
здаются папки, указанные в Вера, но не существующие. 


Листинг 5.3. Код функции стеж{еЕЦе( Шера) 
исНоп сгежеЕПе (Пера) { // Создание текстового файла 
/* Возвращает ссылку на созданный файл или 0, если файл не создан */ 
уаг №0 = пем АсИуеХОВесЕ(" Зегритя. Е Небу ем Овес") 
уаг 1 = Шерай. [а идехОГ("\\") 
И @ >= 0) Ше = Шера®.5 15$ (1 + 1) /* выделяем имя файла из 
[Пера */ 


уаг Ёо|!4ег = Шера . $Псе /* выделяем путь к файлу 
без имени файла */ 

Ш (сгемеЕо9ег(4ег)) тгетагп 0 /* проверки и создание 
недостающих папок */ 

И (50. ЕИеЕх! $ 15$ (Ге) ) // если файл существует, то 


теиги {50.ОрепТех Е Пе (ера , 2) // открываем его для записи 


геиги [50. СгеайеТехЕ Е Пе (Го14ег + "\\" + Не) /* создаем файл и 
возвращаем ссылку 
на него */ 


Здесь используется функция сге{еЕРо!4егО создания папки, которая описана в под- 
разделе 5.3.1. Она производит все проверки и при необходимости создает недо- 
стающие папки. Обратите внимание, что если указанный в параметре Шера файл 
уже существует на диске, то он открывается для записи. 


В рассмотренной выше функции сгежеЕНе(@ера) для выделения имени файла 
из его полного имени Йера мы использовали встроенные функции Лауа5си!ре: 
1а5ИпаехОЮ, зибзО и $Псе(). Однако вместо этого можно было использовать 
и специальные методы объекта файловой системы: 


.  ОеВазеМате(Мера) — возвращает последний элемент в Вера без расшире- 
ния; 
‚ ОСеЕжепзюпМате(Нерай) — возвращает расширение последнего элемента 
в Шерап. 
Примеры 
уаг 150 = пем АсИуехОв]ес*("Зсирипто.ЕПеЗу{етОес!") 
{50.Се{ВазеМмате("С:\\Иои документы\\1е{е.{х+{") // дез{Ие 


150. С@ЕжепзюпМате("С:: \\Иои ПОКументТЬА\ЩезН 1 [е. 5+1") // 

Не менее полезным является и метод ВиПаРа (ра, пате), который к пути рав 
дописывает элемент пате: 

уаг 150 = пем АсНуехоОБ]есЕ("Зспири та. ЕПебуз{ет ОБ] ест") 

150.ВиПаРа{й ("С:\\ Мои документы", “Тезтт11е. 1х1 
Выше уже отмечалось, что если файл был создан, то он остается открытым. Что- 
бы закрыть файл, используется метод С1озе0. 
Примеры 

// Создание и закрытие файла: 


уаг Ё50 = пени Асе1уехоь)есе ("5$сх1рЕ1п49.Е11ебузкешоОЪ)есе") 
уаг муЁ11е = Ево.СгеабеТехеЕ11е("С:\\Мои документы\ \езЕЁ11е. хе") 
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уаг туШе.С1о$е() 


// Открытие и закрытие файла: 

уаг Е50 = пем и НЙ 

уаг Е = 2) 
уаг и те. 1овео 


// Создание/открытие и закрытие файла: 
уаг пуЕ11е = сгеабег11е("С : \\Мои документы\\1ез17 1 1е. &хё ") 
уаг щуЕ11е .С1озе() 


5.4.2. Копирование, перемещение и удаление файла 


Для операций копирования, перемещения (переименования) и удаления файлов 
имеются методы объекта файловой системы (ЕЗО) и методы объекта файла. 
уаг 150 = пем Ас мехХОЫ] ес: (* е5у ; СЁ”) // объект ЕЗО 
уаг Пе = 150.Се+Е1[е (ЕПера{п!) // объект файла 
/* Методы копирования {Пера{П! в 1Пера+п2 */ 
Е11е.Сору (Е1ТераеВ2) 
Езо.СоруЕ11е (ЁЕ11ераЕВ1.ЁЕ1ТераЕНн2) 


/* Методы перемещения 1Пера{Н! в 1Пера+п2 */ 
Ше.Мо\уе (1Пера+{В 2) 
{50.МомерНе (1Пера{!!.1Пера{Н2) 


/* Методы удаления 1Перафп! */ 
11е.Бе!ете (1ПератиГ) 
150.Бе!етерПе (1ПератН!) 


Также как и в случае с папками, методы копирования и удаления имеют еще один 
необязательный параметр. Так, значение {гие этого параметра в методах копиро- 
вания обеспечивает перезапись уже сушествующего файла с тем же именем, а в 
методах удаления — удаление файлов, предназначенных только для чтения. Пе- 


речисленные выше операции могут применяться к любым файлам, а не только к 
текстовым. 


В следующем примере создается текстовый файл {е$е.1х( в папке С\Мои доку- 
менты, затемэтотфайлперемещаетсявпапкус УИ пао\з\Тетрикопируетсявкор- 
невую папку на диске С. В заключение он удаляется из обеих папок. 


уаг 150 = пем Асиуехоес{(" 
уаг 11 = [50 Сеаетее"С\\Моидокументь {ей М умен в 
// закрываем файл 
ИН = ТГ { + \\ МОМ НОКум6нтТЬи\\ез 1 Пе. 1х{+") /* Получаем ссылку 
на файл */ 
/* Перемещаем файл в папку 
_ С: \И1ааоиз\Тешр */ 
маг Р11е("".; МА пом \\Тетр\\“ез Не. 1х1") // получаем ссылку 
| 6х1 * копируем файл 
в папку СХ */ 
/^ Получаем ссылки на й 
П = Е50.саегИе("С: \\ а Тетр\\ез Не. 1х") 
12 = 150. <еНе("С:\ “ее. 1х”) 
// удаляем файл 
С: \И1пдоиз \Тепр\ЕезЕЕ11е. Е хЕ 
Е3 .Бе1еее() /* удаляем файл 
С: \безеЕ11е. 6х */ 
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Копировать, перемещать или удалять можно только закрытые файлы. Поскольку 
после операции создания файла он остается открытым, нам пришлось использо- 
вать метод Созе0. 


ВНИМАНИЕ — 


Прежде чем копировать и перемещать файлы, необходимо проверить, возможны ли дан- 
ные операции. Так, следует проверить, существует и готов ли диск, достаточно ли свобод- 
ного места на нем, существуют ли все папки, указанные в пути к файлу. Требуется также 
решить, что делать, если копируемый или перемещаемый файл уже создан в месте назна- 
чения. 


Некоторые из этих проверок следует выполнять и перед удалением файла. По- 
пробуйте в качестве упражнения написать код функции, выполняющий все эти 
операции. Отчасти эта задача аналогична созданию и удалению папки (см. раз- 
дел 5.3). Для ее решения вам дополнительно потребуется информация о такой 
характеристике файла, как его объем. 


Значение объема (размера) файла в байтах содержится в свойстве 517е объекта 
файла. В следующем примере мы узнаем объем файла С\ашюехесраё 
уаг 150 = пем АсИуехов]ес{("Зсирипта.ЕИезу<етОБ]ес{ 
уаг ИН = 1$0.0е\ | х // ссылка на объект файла 
уаг те = Н.З1хе // объем файла 
С: \ащоехес.Ба+1 
у$сг1р\ [ /* вывод окна с сообщением 
об объеме файла */ 


Значение свойства 512: объекта файла нужно сравнить со значением свойства 
Егеебрасе объекта диска, чтобы выяснить, достаточно ли места для записи файла. 


5.4.3. Чтение данных из файла 
и запись данных в файл 


Текстовые файлы создаются, чтобы хранить в них данные, и существуют, чтобы 
содержащиеся в нихданные можно было прочесть. Чтение и запись данных про- 
изводится с помощью следующих трех этапов: 


. открытие файла; 
. чтение или запись данных; 
. закрытие файла. 


Открытие текстового файла производится с помощью метода ОрепТехе объекта 
ЕЦебуетОес{ либо с помощью метода ОрепАзТехвйеат объекта файла. При этом 
файл может быть открыт в трех режимах: только для чтения (Юг геад те ошу), для 
записи (Юг \/тИ11$) и для добавления (Юг аррепа!15) данных. Режимы для записи и 
добавления данных не допускают чтения. В режиме добавления записываемые дан- 
ные добавляются к уже существующим. В режиме записи старые данные теряются, 
а новые записываются, поэтому режим записи лучше называть режимом перезаписи. 


Открытие файла можно осуществить следующими способами: 


\уаг 50 = пем АсчуехоОес 
\аг ту Не = 0.Орепте> | . тобе) 
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либо 


уаг 130 = пем Ас|уехОоБ]ест("Зсиирипа.ЕНезу${етОБ]ес{") 
уаг 1еоБ] = 150. @е1Е Пе (ТПера{1) 
уаг ту !е = Шеоб].ОрепА$Тех{${геат(тоае) 


Здесь Шерай — имя файла, возможно, с указанием пути к нему (например, "С\\Мои 
документы \ \(е$е.$х("); то4е — режим открытия файла: 
. | — только для чтения (ЮтеаЯ опу); 
. 2 — для записи (Юг уп); 
. 8 — для добавления (Юг аррепа11®). 
Заметим, что в результате создания нового текстового файла он остается откры- 
тым. Чтобы он был сразу же доступен для записи, необходимо передать методу 
(СтеаеТехеЕЙеО второй параметр со значением тие: 
уаг 30 = пем АсиуехОв]ес+*("Зсирита.Е!еЗузетОБ]ес+{" ) 
{50.Сгеа{еТех{ЕИе(1Пера{т", гие) 
Для чтения данных из открытого текстового файла используются следующие ме- 
тоды объекта файла: 
. Реад(количество_ байтов) — применяется для чтения заданного количества бай- 
тов (символов), которое указывается в качестве параметра; 


. ВеажеО — применяется для чтения строки, при этом исключается символ 
перехода на новую строку; 


. ВедАОО — применяется для чтения всего содержимого текстового файла. 


Если вы используете методы Реас1(количество байтов) или КеааНпеО и хотите про- 
пустить заданное количество байтов или строку, то можете использовать методы 

Юр(количество байтов) и ЭефрИжеО соответственно. Эти методы перемещения по 
файлу изменяют положение так называемого указателя, которое характеризуется 
значениями свойств Сошии (позиция в строке) и Ппе (номер строки) объекта фай- 
ла. При первоначальном открытии файла эти свойства, доступные только для чте- 
ния, имеют значения 1. Каждое применение методов КеааТлпе О и ЭюрИтеО увели- 
чивает значение свойства пе на 1. 


Пример 

уаг {Пера{н = "С: \\аитоехес . Ба!" 

уаг зо = пем АсИуехов]ест("Зсир та. ЕИеЗузетОБ]ес{") 

уаг ту Ше = 150. ОрепТежйе (ЕПера{и, 1) // объект файла 

м по (ту е. сте + "„ “" + тмуШе.Соитий ) // 1, 1 

\Ут11 КТрь1 // пропустить строку 

м р\ по (ту е. сте + ", “" + муШе.Соитп) //ё, 1 

пу+11е. $К1р(14 // пропустить 14 байтов 
(ту йе. те + ", " + муШе.Сомтт ) // 2, 15 


Заметим, что применение метода ВеадАЦ( после методов перемещения даст в ре- 
зультате содержимое файла, начиная с текущего положения указателя и до конца 
файла. 

Для записи данных в открытый текстовый файл используются следующие мето- 
ды объекта файла: 
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У!тце (строка) — применяется для записи строки символов без символа перехо- 
да на новую строку; 


‚ УмеПле(сТрОКа) — применяется для записи строки символов с добавлением 
символа перехода на новую строку; 


* УщеВапКкКИ тез (К (\/М4есТВо) — применяется для добавления пустых строк, ко- 
личество которых указывается в качестве параметра; по существу, этот метод 
просто записывает заданное количество символов перехода на новую строку. 


Код в листинге 5.4 демонстрирует применение методов записи и чтения данных. 


Листинг 5.4. Код методов записи и чтения данных 


уаг 1Перафп = “С: \\Мои документы\\1е51Т Пе. пт" 

уаг 0 = пем АсИуехОв]ес+("Зсир то .Е|еЗузетОБ]ес+ 

уаг ту Пе = 150.Сгеа{еТежЕНе(1Пера+н, тие) // создание в режиме 
записи ту 11е Ми тете ("< Н4т[>") 

пуЕ11е.Му1сеГ1те ("<р1>ъорнНВет всем!</ы>") 

муЕ11е. Иг1 т: Это - пробная запись в файл") 

тутПе. М/ге ("< зсг!/р{>а!ег{("Какое-нибудь сообщение’) < /$сг!р{>") 

му Не. МгЦевВапкте$(2) // две пустые строки 

| е. (1051 // закрываем файл 


уаг 30 = пем АсНуехОвес+("Зсир+та. ЕНезузетОес{") 

уаг туШе = 150.ОрепТех{ЕПе(1Пера1!,8) —/* открываем в режиме 
добавления */ 

ту е.М/гКе ("< /в{т1 >") // дописываем 

тмут1те. // закрываем файл 


уаг 150 = пем Асиуехоес{ Бес”) 

уаг туШе = воОрелтехрейерайл) е (11 1ера1п, 1 // открываем в режиме чтения 

му 1Те. Кеад (‹ // читаем б байтов: "<пт>" 

у е, $к1ре1пе () // пропускаем строку 

уаг х = Му! е. Веаапео /* читаем третью строку: 
"<Ы>Привет ВсеМ!</в|> */ 

е. С105е // закрываем файл 

Для проведения экспериментов с файловыми операциями полезно выражения 

с методами чтения данных передать в качестве параметра методу отображения 

сообщений У!ЗсирЕ ЕсвоО. Например, УЗсирЕ. Еспо(ту е.Кеаа! 1е()). 


Мы можем прочитать файл построчно в массив, чтобы потом обработать его с по- 
мощью методов массива и строкового объекта. В листинге 5.5 приведен код функ- 
ции, которая читает текстовый файл и возвращает массив. 


| | 


Листинг 5.5. Код функции, которая читает текстовый файл и возвращает массив 


ТипсНоп ЕНеТоАггау(1Пера{й){ // чтение файла в массив 
уаг 30 = пем АсНуехОвес+("Зсир+та. ЕИеЗучетОес{") 
уаг {Пе = 15о.де{ЕНе(Пера{т) 

уаг $е = Ше.З1хе // объем файла 

Пе = 1{50,ОрепТеж{Ие(Пера{т) 
Е11е.5К1| // перемещаем указатель в конец файла 
уаг Шпез = Ше. [ // количество строк 

Не. С1озе!) 

уаг 30 = пем Ас|уехОв]ес+("Зспр+та. ЕИеЗузетОес+{") 

уаг {Пе = #50.ОрепТежейНе(Пера{1) 

уаг х = пем Аггауо 


продолжение & 
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Листинг 5.5 (продолжение) 


уаг! = 0 
ммпНе(г < ИпезН{ 
х[1] = Е 1 1е. Веа@Мп е () // чтение строк файла 


Ее. С1озе О 

геаги х // возвращаем массив строк файла 

} 
Чтобы протестировать эту функцию, выполните следующее выражение: 

М9се1рЕе .Есро (Р11еТоАггау ("С: \\айбоехес.Бае")) 
Обратите внимание, что в функции ЕеТоАпауО нам пришлось дважды создавать 
объект Е\О и открывать файл. Первый раз это понадобилось, чтобы узнать коли- 
чество строк в файле путем перемещения указателя на величину, равную объему 
файла. При этом указатель оказывается за пределами файла, и, следовательно, 
количество строк оказывается на | меньше, чем значение свойства пе. К сожале- 
нию, мы не можем переместить указатель в начало файла. Поэтому мы закрываем 
файл и вновь его открываем, чтобы начать построчное чтение и запись в элемен- 
ты массива с помощью оператора цикла. 


5.4.4. Создание ярлыков 


Ярлык (значок) представляет собой файл с расширением ШК, содержащий ссыл- 
ку на некоторое приложение или документ, атакже параметры его открытия в окне. 
При щелчке на ярлыке указанное в нем приложение открывается. Аналогичный 
ссылочный файл с расширением и! содержит Ч КГ-адрес документа (веб-страни- 
цы). Создать ярлык на рабочем столе компьютера, в меню Пуск, в папке Автоза- 
грузка, Избранное или в любой другой папке можно с помощью объекта \№5си!ре. 5Вей, 
входящего в состав \\!ЗН. Этот объект (точнее, его экземпляр) создается двумя 
способами, так же, каки ЕЗО. 


‚ Первый способ: 
уаг Музпе! = пем АсйуехОов]ес{(“”\МЗ спирт. ЗНе!”") 
. Второй способ: 
уаг Музпе! = Мси р{ .СгеаеОБес+ ("\М/Зси р+. ЗВе!й") 


С помошью метода ЗресаЕо1АетзО можно узнать местоположение специальных 
папок, таких как Рабочий стол, Автозагрузка, Избранное, Мои документы, Программы 
и др. За этими папками закреплены специальные идентификаторы (переменные). 
Например, папке Рабочий стол соответствует идентификатор ОезКюор, папке Мои 
документы — МуРосишиет(5, папке Избранное — Рауогйез. Вот список всех идентифи- 
каторов специальных папок: АЧОзегзОезКюр, АЧОзетзЗМа(Мепи, АЧ\Озег$Ргоэгаилв, 
А ЗТайир, ПОезКюр, Еауощез, Кош, МуОоситепв, Ме Нооа, РипНоо4, Ргоэтагл$, 
Весепь ЗепаТо, МаиМепи, Запир, Тетр!айез. 


Чтобы получить местоположение папки, например Главное меню, открываемой при 
щелчке на кнопке Пуск, следует выполнить следующие выражения: 
уаг Музпе! = пем Аси\ехОвес{(”\М/Зспру. пей") 
уаг тура = Музпей.Зреса!Ро!Чег$("З{а {Мепи") 
/* Значение: СЛ\Мпаом\тпаВНое меню */ 
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В листинге 5.6 приводится пример программы создания ярлыкадля Блокнота \Мп- 
4о\/; (поера4.ехе) и расположения его на рабочем столе компьютера (в папке Ра- 
бочий стол). 


Листинг 5.6. Код программы создания ярлыка для Блокнота 


уаг Музве11 = рем АсЕ1уехор]ес® ("И$сх1ре.56е11") 

уах тшурабН = 
Му5не11 . бреста1Ро1дег: е5КЕор") // путь к папке Рабочий стол 

/* Создание ярлыка и подписи к нему: */ 

уаг пузрогЕсие = МузВе11.СгеасезпогЕ сие (мураЕб + "\\Мой Блокнот.Тпк") 

/* Папка расположения \\МпЧо\мз: */ 

уаг тумипаг = Музвей.ЕхрапаЕпутоптепт{$ ип9$("%\миптаи%") 

/* Параметры ярлыка: */ 

// расположение файла: 

тузпо{си{.ТагдеРа = Музвей.ЕхрапаЕпутоптепт 5 и т9$(туммтай + 
"\\по{ерад.ехе") тузпомси{ Мог па гестогу = 
Музпен.ЕхрапаЕпиугоптет {5 т9$(тура{й) // рабочая папка 

тузНощси{ \ММпаом+Уе =4 // тип окна (стандартное) 

/* файл, содержащий графическое изображение ярлыка: */ 

тузПо{си{.|сопГосаНоп = Музпей.ЕхрапаЕпутоптепт$5 и п9$(туммпай + 
"\\потераа. ехе") 

тузпог{си+{. Зауе () // сохранить на диске 


Здесь МузВей.ЕхрапаЕпупоптеп и11$("%у/утаАй%") возвращает строку, содержа- 
щую значение переменной среды, вданном случае %\/шан%. По умолчанию файл 
по{ера4.ехе находится в папке расположения операционной системы Уп4о\з, но 
эта папка не обязательно называется СЛ\УМпдо\з. Свойство УЛидо\$Уе может при- 
нимать три значения: 3 — развернуть окно на весь экран, 4 — стандартное окно, 
7 — свернуть в значок на панели задач. 


8 следующем примере создается ярлык в главном меню кнопки Пуск для некото- 
рой программы аЁ\шт.ехе: 


уаг Музпе! = пем Аси уехОес+ ("\М$ сп рт. пей") 
уаг тура{т=Музпней.Зрес!а!Ро!аег$ (" З{аг{Мепи") 
уаг тузНог{си{ = Музнен. Сгеа1е по си{ (тура + "\АФП. шк") 
тузпог сит. Тагде:Рай = 
Музпей. ЕхрапаЕп\! гоптеп 3! пд$ ("С: \\АРР\\аруйп.ехе") 
тузпог{сит.М/огкто О тестогу = 
Музпей.ЕхрапаЕпу! гоптеп{$1г! пд9$(”С: \\АЕР") 
ту5ПогесыЕ . МтпаомтутТе 3 // тип окна (развернуть на весь экран) 
тузпогЕси{. [сопГосаНоп = 
Музпей. ЕхрапаЕп\у! гоптеп{5 11 пдз$ ("С : \\АРР\\ар.1со") 
тузпог{си{. Заме() 
Приведенный ниже код создает в папке Избранное ссылку (и11-файл) на главную 
страницу веб-сайта автора этой книги: 
уаг Музпе! = пем Аси уехОес+ ("М5 спирт. пей") 
уаг тура =*'Музпей.Зрес!а!Ро[аегз ("РамогЦе$") 
уаг тузпог{си{ = Музпей .Стгеа{епог{си{ (тура + 
"”\\Сам себе \МебБ-дизайнер.ии!") 
тузНог{си{.ТагдаетРа1п = Музвей.ЕхрапаЕпмгоптеп1 $ {ита$С 'ПЕр:// 
\м/мим.ааптга!.ги/-Чипаем") 
тузпог{си{ .бамео 


Основное отличие этого примера от предыдущих состоит в том, что свойству 
Тагое Ра (путь к цели) присваивается ЧВГ-адрес документа. 
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5.4.5. Запуск приложений 


Для запуска приложений служит метод ВиО объекта Успре. Вей. Командная стро- 
ка запуска приложения (обычно это просто полное имя файла программы) пере- 
дается методу в качестве строкового параметра. 


Примеры 


уаг МузЬе11 = пем АсЕ1уехоОБЗесе ("М$ск1рЕ.б1е11") 
Му зре11. Воап ("хлпмога .ехеС: \\Му\\ту аосимепе .Чоре") 
МузВе11 .Воп("С: \\Муго1аек\ \пургодгам.ехе") 


5.5. Работа с реестром 


Реестр \Мш4о\$ представляет собой базу данных, содержашую сведения об ее 
настраиваемых параметрах, или, какеще говорят, о конфигурации операционной 
системы. Кроме того, в реестре хранится информация о настройках аппаратных 
средств компьютера и программ. Реестры различных систем и версий семейства 
У/падо\з частично различаются. Однако между ними много общего. В УМш4о\$ 3.1 
(УЛпдомз Юг УотКОгопрз$) реестр хранится в файле гех.4а в папке УМтао\$. 
В более поздних версиях, УМт4о\з 9х/Ме и т. д., реестр размещается в двух фай- 
лах, расположенных в папке \Мтдо\з: зу$ет.4а{ и изег.4а{. Реестр задумывался 
для замены настроечных й\-файлов. Записи в файле реестра имеют более удоб- 
ную древовидную структуру. Хотя йи-файлы также поддерживаются УМт94о%\$, 
разработчикам программного обеспечения рекомендуется хранить настроечную 
информацию в реестре. 


Чтобы работать с реестром, необходимо понимать его структуру. Древовидная 
структура реестра представляет собой иерархически упорядоченное множество 
разделов (папок), содержащее следующие шесть разделов самого верхнего (кор- 
невого) уровня (табл. 5.1). 


Таблица 5.1. Разделы реестра. 
Имяразделареестра Сокращенное имя Описание 
верхнего уровня раздела реестра 


НКЕУ СТАЗЗЕ$_ВООТ НКСА Содержит информацию о зарегистриро- 
ванных типах файлов, ОЁЕ и др. 


НКЕУ СУВВЕМТ_УЗЕВ НКСУ Содержит параметры настройки оболочки 
\МЛпао\м/$ для пользователя, вошедшего 
в М/паом$. Например, настройки 
Рабочего стола, меню кнопки Пуск. Если 
на компьютере работает единственный 
пользователь и используется обычный 
вход в М/паом/з, то содержимое этого 
раздела берется из подраздела 
НКЕ/ УЗЕВЗ\ОЕРАЧЕТ 


НКЕУ/ ГОСАЁЕ_МАСНМЕ НКЕМ Содержит информацию об установленных 
драйверах и программном обеспечении 
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Имя раздела реестра Сокращенное имя Описание 
верхнего уровня раздела реестра 
НКЕ/ У$ЕА$ НК Содержит параметры настройки оболочки 


\МИпао\м/$ для всех пользователей. 
Информация из этого раздела копируется 
в раздел НКЕУ СУВВЕМТ УЗЕВ. С другой 
стороны, все изменения в разделе 

НКЕУ СУААЕМТ_УЗЕВ автоматически 
переносятся в раздел НКЕУ_ОЗЕА 


НКЕу СУВВЕМТ _ СОМАС НКСС Содержит информацию о настройках 
устройств Рида&Р!ау, атакжесведения 
о настройках компьютера с переменным 
составом аппаратных средств 


ННЕУ О\М\М ОАТА НКО Содержит изменяющиеся данные 
о состоянии устройств, установленных 
на компьютере пользователя. Эти 
сведенияотображаютсявокне Панель 
управления > Система > Устройства > 
Свойства. Данные этого раздела 
обновляются операционной системой 
\ММпаом$, и поэтому не рекомендуется 
редактировать его самостоятельно 


Перечисленные коренные разделы имеют подразделы, ате — свои подразделы и т. д. 
В конечном разделе ветви дерева реестра определяются параметры. Каждый па- 
раметр имеет имя и значение. Работа с реестром заключается в просмотре, созда- 
нии и удалении его записей. Так, вы можете создать или удалить раздел реестра, 
создать или удалить параметр в каком-либо разделе. Однако делать это без четко- 
го понимания целей и правил не рекомендуется. 


ВНИМАНИЕ 


Не следует открывать и редактировать файлы реестра зузЗет.Аа{ и изег.Аа{ в текстовом 
редакторе. 


Здесь мы не будем подробно обсуждать, что нужно изменить в реестре, чтобы по- 
лучить тот или иной эффект. Рассмотрим, как можно изменять записи в реестре, 
если такая необходимость возникла. 


Для работы с реестром используются три основных способа. 


. С помощью редактора реестра — программыгегеаИ.ехе. Чтобы запустить ре- 
дактор реестра, достаточно выполнить команду Пуск > Выполнить, ввести с кла- 
виатуры слово гезеай и щелкнуть на кнопке ОК. Данный способ наиболее без- 
опасный. 


. С помощью гез-файлов. Это текстовые файлы с расширением гед, записи в ко- 
торых имеют довольно простую структуру. Запуск гез-файла, например, двойным 
щелчком на его имени в Проводнике У! т4о\з приводит к открытию диалогового 
окна с предложением добавить информацию из этого файла в реестр. При вашем 
согласии данные из гез-файла будут импортированы в файлы реестра. 
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. С помощью программы Лауа$ сир, использующей специальные методы У/т- 
4о\$ эсирИипе Но$. В этом случае можно организовать не видимую пользова- 
телем работу с реестром (если, конечно, он не заблокировал выполнение сце- 
нариев). 

Рассмотрим сначала структуру записей в ге ‘#-ефийв, который можно создать с по- 
мощью обычного текстового редактора, например Блокнота \Мшдо\з. В первой 
строке этого файла должно быть написано прописными буквами КЕСЕОП4. Затем 
должна быть пустая строка. В следующей, третьей строке в квадратных скобках 
пишется имя раздела реестра. В четвертой строке располагается запись согласно 
приведенному ниже формату: 

"имя_параметра"=значение 
Если в данном разделе реестра следует разместить еще один параметр, то запись 
о нем располагается в следующей строке. Таким образом, сведения о каждом па- 
раметре записываются в отдельной строке гег-файла. Аналогичным образом можно 
создать записи, относящиеся к другому разделу реестра. Однако между такими 
секциями, каждая из которых соответствует отдельному разделу реестра, обяза- 
тельно должна быть одна пустая строка. Таким образом, структура гег-файла имеет 
следующий вид: 

ВЕСЕОП4 


[имя_раздела1] 
"имя_параметраНазначение11 
"имя_параметра12"=значение!2 


"имя_параметра1М"=значение1 М 


[имя_раздела?] 
"имя_параметра21"=значение21 
"имя_параметра22 "=значение22 


"имя_параметра2?М" значение? М 


[имя раздела1_] 
"имя_лараметра1Л"=значение1_1 
"имя параметра1_2"значение1-2 


"имя_параметра1_М"=значение1 М 
Значения параметров могут принадлежать одному из трех типов: 


. строковый — значения этого типа являются просто строкой символов, заклю- 
ченной в кавычки; 


'. ’ ОМОВО — для записи значения этого типа используется формат \ога ХХХХХХХХ 
Вместо Х записываются ше стнадцатеричные цифры. Обычно параметры типа 
ОМОКО имеют значение либо 0, либо 1. В этих случаях для задания значения 
требуется записать либо @\4:0000000,900, либо 4\ога:00000001; 


. ДВОИЧНЫЙ — для записи значения этого типа используется форматехХХ.ХХХХ, 
Вместо ХХ записываются шестнадцатеричные цифры; пары таких цифр разде- 
ляются запятой. Например, для задания значения аЁО0 01 00 следует записать 
Бех:аЁ,00,01,00. 
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Кроме того, в реестре могут быть установлены параметры по умолчанию (4еГаи!). 
Чтобы присвоить какое-то значение параметру по умолчанию, необходимо про- 
сто записать в гез-файле следующее выражение: 

(Э=значение 


Рассмотренные выше записи гез-файла добавляют, а не перезаписывают записи 

в реестре. Чтобы удалить раздел в реестре, необходимо в гег-файле перед его име- 

нем в квадратных скобках поставить символ «минус», как в следующем примере: 
[-НКЕУ ГОСАГ, МАСНГУЕ\бой\аге] 

Чтобы удалить параметр, следует присвоить ему символ «минус»: 
"“имя_параметра“”= - 

Ниже в качестве примера приведено содержимое гег-файла, с помощью которого 

устанавливается начальная веб-страница, загружаемая в браузер Пиегпе{ Ехр]огег: 
ВЕСЕР!Т4 


[НКЕУ СУВЕМТ_УЗЕВ\ЗОРТ\ММАВЕ\М!сгозоНХи1еге{ Ехр!огег\Мат] 

"З{агЕРаде" = "Пр; //мимм.пуммеб.ги" 
Читать, создавать и удалять записи в реестре можно с помощью специальных ме- 
тодов объекта Уепре.Звей, входящего в состав \/$Н: 


. КеКеааО — возвращает запись реестра или значение параметра; 


. КВес\тиеО — создает новую запись в реестре или изменяет значение параметра 
уже существующей записи; 


. КВегОаееО — удаляет запись реестра или параметр. 


Применение этих методов имеет следующий синтаксис: 


уаг Музве] = пем АсиуеХОес+("\У/$ сре. Вей") 

Музпе|.метод(параметры) 
Метод Вез\У!гце () принимает в качестве параметра строку, содержащую имя разде- 
ла реестра, за которым указывается имя параметра. Все элементы имени раздела 
разделяются двойными обратными слэшами. Например, в строке "НКЕХУ СОВЕМГ_ 
ОЗЕВ\\Мугез\\пурагат” последний элемент турагат является именем параметра, 
а не раздела реестра. 


Метод Кег\УтиеО принимает три параметра, из которых последний не является 
обязательным. Первый параметр — строка, содержащая имя раздела или имя па- 
раметра. Если эта строка заканчивается двойным слэшем, то подразумевается, что 
последний элемент строки — имя раздела, в противном случае — имя параметра 
в разделе. Второй параметр метода Кез\У!гиеО представляет значение параметра 
раздела. Если имя параметра раздела не указано, то подразумевается параметр по 
умолчанию. Третий, необязательный параметр метода Ке»\/гиеО задает тип пара- 
метра в разделе реестра и представляет собой "ВАб ОМОВО" или "ВЕб_ВМАВУ”, со- 
ответственно для типов ГМОКО и двоичного. Если тип не указан, то подразумева- 
ется строковый тип. 


Примеры 


уаг Музве| = пем АейуеХОЦесе("УУ5 сгрЕ. 5 пей") 

/* Создание подраздела Мугее в разделе НКЕУ СОВЕМТ ОЗЕВ и присвоение 
параметру по умолчанию значения "значение": */ 

Музнеп. ВезУтИе("НКЕУ_СОКЕМТ_О5ЕК\\Муге?\\", "значение") 
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/* Создание в разделе НКЕУ СОКЕМГ ОЗЕВ\ Мугез строкового параметра 
шурагаш! и присвоение ему значения "некоторая строка": */ 

Музней.Вед\/гИе("НКЕУ СУВЕМТ ОЗЕВ\\Мугед\\турагат!", "некоторая 
строка") 

/* Создание в разделе НКЕХ ООВЕМТ ОЗЕВ\ Мугех двоичного параметра 
шурагат2? и присвоение ему значения 5: */ 

Музпе!.Вес\/ие("НКЕУ СУВЕМТ_ЧЗЕР\\Мугесд\\пурагат?", 5, "ВЕС_ВМАРУ”") 

/* Создание в разделе НКЕХУ СОВЕМГ ОЗЕВ\ Мугех параметра т турагат3 типа 
ПЛОВ и присвоение ему значения 3: */ 

Музпе!.Вед\/ие("НКЕУ СУРВЕМТ_1)ЗЕВ\\Мугед\\турагат 3", 3, "ВЕ@ Г\МЛЮВО") 


Метод ВегОаееО принимает в качестве параметра строку, содержащую имя раз- 
дела или параметра. Если эта строка заканчивается двойным слэшем, то подразу- 


мевается, что последний элемент строки — имя раздела, в противном случае - 
имя параметра в разделе. 
Примеры 

уаг МузпейЙ = пем Асй\уехОБ]есф ("М/Зси!р+. Звей") 


/* Удаление в разделе НКЕУ СУВЕМТ У$ЕВ\ Мугед параметра турагат!: */ 
Музве!.Вес\М/ие("НКЕУ СУВЕМТ_ЧУЗЕР\\Мугед\\пурагат!”") 

/* Удаление подраздела Мугед в разделе НКЕУ СУРЕМТ_УЗЕВ: */ 
Музве!.Веореже("НКЕу СУВЕМТУ.ЗЕВ\\Мугесд\\") 


СОВЕТ 


Вместо полных имен корневых разделов реестра можно использовать их сокращенные 
обозначения. Например, вместо НКЕУ СУВЕМТ У$ЕВ можно писать НКСИ. 


В листинге 5.7 приведен пример программы, делающей запись в реестре, которая 
устанавливает стартовую веб-страницу. 


Листинг 5.7. Запись установки стартовой страницы 


уаг Музйе!| = пем АсИуе ХОБ] есЕ(" У бегурЕ. ве") 
уаг туз{агразе = В@р://уууу.шу\меЬ.ги // нужная страница 
/* Проверяем, какая веб-страница является начальной: */ 


${аг(разе = МузВей. ВегУ\а е("НКСОХ\ЗОЕТУУАВЕ\\МЕ с гозо 1 \ \егпей 
Ехр!огегО Маш ОЗ (аг' Разе") 


1 (5апбразге != тузбаграее) // если другая 
Музпе!п. Вез\Ууп се ( "НКСИ\ЗОЕТУАВЕ\\ МЕ сгозоЁ{\ \Ти(егпее 
Ехр|огег\\ Мат\\51аг( Раз". туз{агразе) 


Аналогичным образом можно создать записи в реестре, запускающие прило- 
жения. 


Приложение 1. Руководство 
по динамическому НТМЕ 


Основные понятия 


НТМЕ (НурегТех Магкир Гапецае»е — язык разметки гипертекста) является ос- 
новным языком программирования веб-страниц. Описания веб-страниц содер- 
жатся в НТМГ-программах (НТМГ-кодах), которые хранятся в обычных тексто- 
вых файлахс расширением Шт или 6111. Иногда эти программы называют НТМТ- 
документами, но обычно НТМТГ-документом считается то, что можно видеть в окне 
браузера. Программы на языке НТМИ, содержат инструкции (коды), называемые 
тегами. Теги представляют собой последовательности символов, заключенные 
в угловые скобки (например, <Р>). 


Большинство современных браузеров допускают запись тегов в любом регистре, 
то есть как прописными, так и строчными буквами. Все ключевые слова тегов, 
являющиеся обычно аббревиатурами слов английского языка, записываются бук- 
вами латинского алфавита. Например, [МС —сокращение слова ипазе (изображе- 
ние). 


НТМЕ-программа должна начинаться тегом <НТМЕ> и заканчиваться тегом 
<НТМ! >. Между ними находятся другие теги программы или текст, который вы 
хотите вывести в окне браузера. Некоторые теги используются только парами (на- 
пример, <НГМИ > и </НТМГ>). При этом первый из них называется открывающим, 
а второй — закрывающим. Иногда парные теги называют контейнерными, пото- 
му что между ними можно разместить другие теги. Таким образом, в контейнер- 
ные теги можно вкладывать другие теги, в том числе и контейнерные, то есть теги 
могут быть вложенными. Сейчас запомните этот факт, а в дальнейшем разберем- 
ся, как ими пользоваться. Существуют одиночные теги, для них нет соответствую- 
щих закрывающих тегов. Примером одиночного тега является тег <ВВ> (конец 
строки). 

Теги могут содержать параметры, называемые атрибутами, которые, в свою оче- 
редь, могут иметь значения — аргументы. Можете считать (если так удобнее), что 
тег — это команда, атрибут — имя ее параметра, а аргумент — значение парамет- 
ра. Например, для вывода на экран изображения, хранящегося в файле картинка.]рд, 
используется тег 

<мМ@ $АсС="КартННКа./ рд"> 
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Здесь [МС — название тега, ЗВС — атрибут, а "картинка,рд" — аргумент атрибута 


ВС. 


Итак, если мы решили написать НТМГ-программу, то должны включить в нее 
два тега: 


<НТМЬ 
(здесь будут другие теги программы) 
«НМ > 


НТМЕ-программы состоят из двух основных частей: заголовка и тела. Каждая из 
этих частей ограничивается соответствующей парой тегов. Так, заголовок огра- 
ничивается парой тегов <НЕАО>И </НЕАО»>, атело — тегами <ВОБУ> и </ВОБУ>. В ре- 
зультате НТМТГ-программа выглядит следующим образом: 

<НТНЬ 


. (здесь будет заголовок) 


(здесь будут теги тепа программы) 
</ВОБУ> 
</НТМР 
Заметим, что писать каждый тег с новой строки или делать отступы совсем не 
обязательно, однако благодаря этому программа читается лучше. 


Между тегами <НЕАО> и </НЕАО»>, обрамляющими заголовок программы (НТМТ- 
файла), напишем еще два тега: <ТИТЕ> и </ГИПТЕ>. С помощью этих тегов обрамля- 
ется текст, который помещается в заголовок браузера, то есть в самую верхнюю 
полоску его окна. Пусть текст заголовка будет, например, таким: «Основные эле- 
менты НТМТ». Тогда программа примет следующий вид: 


«НТМЕ> 
<НЕАБ> <ТИТЬЕ> Основные элементы НИМЁ </ТИПЕ> </НЕАО> 
<ВОБу> 
... (здесь будут расположены теги тела программы) 
</ВОБУ> 
</НТМГ> 


Заметьте, что тег <ПИТЕЕ> вложен в тег <НЕАБ»>, а тот вложен в тег <НТМГ>. 


В теле нашей программы, то есть между тегами <ВОБУ> и </ВОБУ>, напишем какой- 
нибудь текст, чтобы программа выглядела следующим образом: 
<НТМЬ 
<НЕАР> <ТТТЬЕ> Основные элементы НТМЬ </ТТТЬЕ> </НЕАО> 
<ВОПУ> 
НТМГЕ-документы состоят из заголовка и тела. В теле документа могут 
находиться тексты, рисунки и ссылки на другие файлы. 
</ВОрУ> 
</НТМГ> 


Раскроем окно текстового редактора Блокнот (Мо{ера4) и напишем в нем текст на- 
шей первой НТМГ-программы (рис. П1.1). 


Сохраним нашу программу в файле с расширением Вит или №11. Например, на- 
значим имя файла проба.пит. Чтобы удалось назначить нужное расширение фай- 
ла, выберите в диалоговом окне тип файла Все файлы (*.*) и введите в поле Имя 
файла придуманное вами имя файла с нужным расширением. Теперь необходимо 
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Л Проба.Вт - Блокнот | 
Фавл Правка Поиск Спрьвка 


Г1<НМГ> =] 
<НЕАО> <ТГТЕЕ> Основные элементы НПМЬЕ </ТИТЕЕ> </НЕЫ» 
<ВОру> 

Документы НМ состоят -из заголовка и тела. 

В теле документа могут находиться тексты, 

ТГ рисунки и ссылки на другие файлы. 
</ВОрУ> 
</НТМГ> 


И ВЧ ИР о | 


Рис. П1.1. НТМЕ-код в окне текстового редактора Блокнот (Мо{ераа) 


раскрыть этот файл в браузере. Для этого в Проводнике У\пдо\з (Ехр]огег) найди- 
те файл проба.Вит и выполните.двойной щелчок левой кнопкой мыши на его име- 
ни или на его значке (рис. П1.2). В УМтдо\$ все файлы с расширением Шт и Вт 
открываются в окне браузера П\егпе{ Ехр]огег, если, конечно, вы не установили 
другой браузер. 


Файл Правка Вис  Избомчное. Сервис Справка 


|{ПОсновныеэлементы НТМЕ - МегозониметенЕхро! ео № [ах 


а К Те 


ГАШ МИ СЛМои документы^ роба, Пт се 5] 2? Переход 


т 


Документы НТМЕ. состоят из заголовка и тела. В теле 
документа могут находиться тексты, рисунки и ссылки 
на другие файлы. 


<] Готоео 3:8} Мой козапьзотер 


Рис. П1.2. НТМЕ-документ в окне браузера мегле{ Ехрогег 


Если потребуется что-то изменить в НТМГ-коде, то, не выходя из окна браузера, 
в меню Вид выберите команду (опцию) Просмотр НТМЕ кола. В результате раскро- 
ется окно текстового редактора Блокнот с файлом вашей программы. Внесите не- 
обходимые изменения и сохраните файл под тем же именем. После этого в окне 


браузера выполните команду Вид > Обновить. В результате загрузится измененный 
НТМЕ-файл. 


Итак, мы создали простую страницу. В ней размещен только текст, причем не- 
форматированный. Однако настоящие страницы устроены сложнее и выглядят 
более привлекательно. Более того, в настоящее время в Интернете существуют 
удивительные по красоте страницы. И это очень важно, поскольку необходимо не 
просто опубликовать свою страницу, содержащую информацию, но еще и при- 
влечь к ней внимание читателей. 
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Многие пользователи привыкли работать с солидными текстовыми редакторами 
(текстовыми процессорами), например М$ У№ога. Конечно, для написания тек- 
стов НТМЕ-программ можно использовать любимые редакторы. Однако при этом 
могут возникнуть проблемы. Например, М$ У\ога распознает (не только по рас- 
ширению файла, но и по содержанию), что файл содержит НТМТ-программу, и по- 
казывает не ее текст (код), а результат работы программы, то есть то, как будет 
выглядеть этот НТМГ-документ в окне браузера. Поэтому если вы пользуетесь 
М$ У№ога, сохраняйте текст НТМГ-программы как текстовый файл в формате 
{Х6 азатем переименовывайте его в файл с расширением Пт или Вит. Всего этого 
можно избежать, если сразу использовать простой текстовый редактор Блокнот 
(Моераа). Используя Блокнот, ане М$ \/ога, вы будете уверены, что все несураз- 
ности отображения НТМГ-документа в браузере определяются вашей НТМГ-про- 
граммой, а не «интеллектом» текстового процессора. Когда вы изучите основы 
языка НТМГ, М$ \Мога, а также другие средства автоматизации создания НТМТ- 
документов (например, Егоп{Разе) действительно облегчат программирование. 


Вместо простого текстового редактора вы можете использовать специальные ре- 
дакторы веб-страниц, например М1сгозой ЕгопРазе или Масготе а Отгеатуеа- 
уег. При выборе средств решается следующая дилемма. Любителям, занимающим- 
ся веб-дизайном не систематически, прежде всего нужен конечный результат. 
Профессионалы же любят все держать под контролем, им важен не только эф- 
фект, но и способ, которым он получен. Хотя данная книга написана, в первую 
очередь, для любителей, все же постараемся следовать принципам профессио- 
налов. 
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Рис. П1.3. Окно программы РготщРаде 
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В случае использования такого средства автоматизации разработки веб-страниц, 
как ЕгопРазе, всю описанную выше работу можно выполнить следующим обра- 
зом. Запустите Егоп{Разе. Выберите вкладку М№ппта|. В рабочую область, располо- 
женную в центре окна, введите с клавиатуры текст. У вас должно получиться при- 
мерно то, что показано на рис. П1.З3. 


Перейдите на вкладку НТМЬ чтобы увидеть, какой код программы соответствует 
этой простой странице, содержащей только текст (рис. П1.4). Этот НТМЕ-код 
можно при желании отредактировать. Чтобы посмотреть результат редактирова- 
ния, достаточно просто перейти на вкладку М опта|. 
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Рис. П1.4. Код на вкладке НТМЕ в программе ЕгомРаде 


Если вы хотите посмотреть, как будут выглядеть результаты вашего творчества 
в окне браузера, перейдите на вкладку Ргемеу“. 


Как Егоп{Разе, так и М$ У№о!А при создании НТМГ-программ вставляют в заго- 
ловок (то есть между <НЕАО> и </НЕАО>) теги <МЕГА> с различными атрибутами. 
Пример 

<нтм1_> 

<НЕАО> 

<МЕТА РЕбр-еачи1у="Сопеепе-гапдааде" сопбепе="ха"> 

<МЕТА ВЕср-еао1у="Сопеейе-Туре" сопбепе="сехЕе/ВЕм1" ; срахзее="им1иаомз- 

НЫ 

<МЕТА пате="СЕМЕВАТОВ" сопбепе="М1скозоЕЕ ЕхопЕеРаде 4.0"> 

<МЕТА паме= "Рхоатр" соп с еп = " Егоп® Раде . ЕЧ1 ог . Росимепте" > 
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</НЕАР> 
<вору> 


</вору> 

<нтмр 
Информация, содержащаяся в тегах <МЕТА>, не отображается браузером и служит 
специальным целям. Например, в ней указываются язык, на котором написан до- 
кумент, кодовая страница, ключевые слова для поиска и др. Эти данные очень 
важны для настройки браузера и работы поисковых серверов. Теги <МЕТА> можно 
вставить в НТМГ-программу на заключительном этапе разработки веб-страни- 
цы, называемом публикацией. 


При написании НТМГ-программ, особенно если в них содержится много тегов, 
возникает необходимость вставки комментариев — поясняющих текстов, которые 
не видны при загрузке документа в браузер. Комментарии необходимы разработ- 
чику НТМГ-документа. Для этой цели служит тег <!>. Все, что заключено между 
символами <! и >, считается комментарием и не отображается браузером на экра- 
не. Имейте в виду, что даже программист-професс: ионал через месяц с трудом раз- 
бирается в своем коде, и тогда комментарии помогают ему. 


Обратите внимание на то, что перенос слов текста в окне браузера происходит 
в зависимости от ширины окна. Если вы хотите, чтобы текст располагался по цен- 
тру, применяйте тег <СЕМТЕВ>. Если пользователь изменит размеры окна браузе- 
ра, произойдет новое выравнивание текста. Заметим, что тег <СЕМГЕВ> можно при- 
менять не только к тексту, но и к графике, таблицам и другим элементам, которые 
будут рассмотрены ниже. Тег <СЕМТЕВ> является контейнерным, то есть ему соот- 
ветствует закрывающий тег </СЕМТЕВ>. 


Некоторым тегам в НТМГ-программе соответствуют вполне определенные эле- 
менты НТМ-документа, размещаемые на странице. Например, мы можем напи- 
сать теги, выводящие на экран такие элементы, кактекст, рисунок, видеоклип идр. 
Другие же теги ничего не выводят. Они предназначены для специальных целей. 
Типичными примерами таких тегов являются контейнерные теги (или просто 
контейнеры): <НЕАО», <ВОГБ\> и <СЕМТЕЕ>. Отметим здесь еще один контейнерный 


тег <ГУ>, с помощью которого можно выделить часть (или раздел) НТМГ-доку- 
мента. 


В НТМГ-программу можно вставлять фрагменты программ, написанных на язы- 
ке Лауа Зспре или У1зиа! Вас Зст!рЕ (только для браузера Пиегпе{ Ехр]огег). Такие 
фрагменты называются сценариями и обрамляются тегами <ЗСКТРТ> и </5СВТРТ>. 
В сценариях обычно описывается обработка различных событий, например щел- 
чок клавишей мыши на кнопке или изображении. Использование сценариев опи- 
сано в основной части этой книги. 


Итак, прежде чем двигаться дальше, вы должны четко уяснить следующее. 


. Программа на языке НТМЕ хранится в текстовом файле с расширением Шт 
или Ба. 


. НТМГ-программа состоит из тегов. Теги могут вкладываться друг в друга, 
иметь атрибуты, которые, в свою очередь, могут принимать значения (аргу- 
менты). Теги могут быть контейнерными, то есть парными, и одиночными. 


. Некоторым тегам в НТМГ-программе соответствуют видимые элементы НТМТ- 
документа (заголовки, фрагменты текста, рисунки ит. п.), выводимые на эк- 
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ран в окне браузера. Некоторые теги выполняют специальные функции, не 
связанные с выводом на экран. 


. Все, что заключено между символами <! и >, является комментарием и не 
отображается в окне браузера. 


. Информация, описанная в тегах <МЕТА>, не отображается браузером, но имеет 
важное значение. Эти теги можно вставить в НТМГ-программу на завершаю- 
щем этапе разработки веб-страницы, непосредственно перед ее опубликова- 
нием. 


. В НТМЕ-программу можно вставлять фрагменты, написанные на языках Лауа- 
Зсире и У1зпа| Вазс $сире. Эти фрагменты обрамляются тегами <ЗСВТРТ> 
и </ЗСВТРТ>. 


Форматирование текстов 


Страница обычно содержит тексты — простой и наиболее распространенный спо- 
соб представления информации, хотя далеко не единственный. Вы можете создать 
текст, не уделяя особого внимания тому, как он будет выглядеть в окне браузера. 
Браузер отобразит неформатированный текст, используя настройки, выбранные 
пользователем. Однако даже самому непритязательному пользователю хочется, 
чтобы заголовки отличались от основного текста размером и шрифтом, чтобы 
можно было выделить абзацы, пропустить строку и т. п. Все это называется фор- 
матированием текста. Сразу предупредим, что если вы переусердствуете в этом, 
то пользователь просто не сможет прочитать ваш текст, не говоря уже об эстети- 
ческом восприятии. Запомните, что тексты — это главное на вашей странице. Они 
должны правильно отображаться почти во всех браузерах. 


Если вы работаете в специальной программе, предназначенной для создания веб- 
страниц (например, Егоп{Разе), то у вас имеется множество вариантов, подобных 
форматированию в обычных текстовых процессорах. Поэкспериментируйте, на- 
блюдая при этом, какие теги создает программа Егоп{Раее (см. вкладку НТМИ. 


При оформлении текстов используются специальные теги. Рассмотрим некото- 
рые из них. 


. Тег <ВК> предписывает переход на новую строку. 


* Тег $Р> является тегом абзаца. После него текст будет выводиться с новой стро- 
ки и, кроме того, одна строка будет пропущена. Если не использовать эти теги, 
то разбиение текста на строки будет определяться шириной окна браузера, так 
что вид текста может оказаться совсем не таким, каким мы его себе представ- 
ляли. 


. Если вы хотите, чтобы текст выравнивался по центру окна браузера, исполь- 
зуйте тег<СЕМТЕК>, который упоминался выше. 


ВНИМАНИЕ 
Теги <ВН> и <Р> действуют по отношению не только ктекстам, но и кдругим элементам 
страницы. Например, если вы хотите, чтобы рисунок размещался ниже текста, то поставь- 
те между текстом и тегом рисунка <ВВ> или <Р>. 
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Стандартные логические стили 


Для выбора размера шрифта можно использовать теги так называемых логиче- 
ских стилей. Их всего шесть, обычно они используются для определения заголов- 
ков различного уровня. При переходе от первого стиля к шестому постепенно 
уменьшается размер и толщина букв шрифта. Теги логических стилей записыва- 
ются как <Н1>, <Н?2», ... <Нб>. Каждый из них имеет соответствующий закрываю- 
щий тег. Например, тегу <Н1> соответствует закрывающий ' тег</Н1>. 
Пример 

<Н1>Заголовок 1-го уровня </Н1> 
задает вывод текста Заголовок 1-то уровня шрифтом, соответствующим первому 
логическому стилю. 
Заметим, что логический стиль определяет стиль текста сообразно настройкам 
браузера. При этом стиль <Н?2> всегда будет «меньше», чем <Н1>, если, конечно, 
автор страницы не переопределил его по своему усмотрению. Дело в том, что вы 
имеете возможность переопределить установки по умолчанию. Для этого исполь- 
зуются средства каскадных таблиц стилей (С55). 


Следующая программа демонстрирует использование тегов логических стилей 
(рис. П1.5). 


Я Заголовки - МсгозоЯ И\егте{ Ехр!о! 


фай ‘Правка Вид Избранное” Сервис’ Справка #7 


2 Заем: 


Заголовок 1-го уровня 


Заголовок 2-го уровня 


Заголовок3-гоуровня 
Заголовок 4-го уровня 
Заголовок 5-го уровня 

Заготовок *-го уровня 


Заголовок 7-го уровня 


4 Моузаетьютер 


Рис. П1.5. Логические стили 


<НТНЕ> 

<НЕАО> <ТИТЕ> Основные элементы НПШМЕ </ГПТТЕЕ></НЕАО» 
<ВОБУ> 

<Н1>Заголовок 1-го уровня </Н1> 

<Н2>Заголовок 2-го уровня </Н2> 
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<Н3З>Заголовок ^`то уровня </НЗ> 
<Н4>Заголовок 4-го \ФОВНЯ </Н4> 
* <Н5>Заголовок 5-го уровня </Н5 
<Нб>Заголовок б-го уровня </Н6 
<Н7>Заголовок 7 -го рровня </Н7> 
</ВОВУ> 
</НТМГ> 


Управление шрифтом 


Кроме использования стандартных размеров и начертаний (гарнитуры) шриф- 
тов можно определять шрифты для каждого фрагмента текста с помощью специ- 
альных тегов. 


Самый простой способ — использование так называемых физических стилей 
(табл. П 1.1). 


Таблица П1.1. Теги физических стилей 


Стиль Тег 
Полужирный (Во!а) <В> 
Курсив (Цайс) <> 
Подчеркнутый (Упаегзсоге) <> 
Вычеркнутый (З1Ке Ош) <$> 
Пишущая машинка (ТуреммКег) <иИ> 
Мерцающий (только для браузера Мезсаре Мамда юг) <ВиМК> 


Для каждого тега физического стиля существует соответствующий закрывающий 
тег, который отменяет стиль, установленный ранее. Например, для тега <В> за- 
крывающим тегом является </В>. 


Ниже приведен пример программы и внешний вид различных физических сти- 
лей (рис. П1.6): 

<НТМ1 > 

<НЕАО><Т1Т1Е>Физические ст’ли</Т1Т1Е></НЕАО> 

<ВОБУ> 

<В>Полужирный<Р></В> 

<1>Курсив<Р></1> 

<и>Подчеркнутый<Р></и> 

<5>Вычеркнутый<Р></5> 

<ТТ>Пишущая машинка<Р></ТТ> 

<В><1>Полужирный курсив<Р> 

<11>Попужирный курсив подчеркнутый 

</ВОВУ> 

</НТМЬ> 


Внутри тега заголовка можно вставить тег физического стиля, чтобы модифици- 
ровать весь заголовок или только некоторую его часть (рис. П1.7). Например, чтобы 
выделить курсивом часть текста, определенного в качестве заголовка, можно ис- 
пользовать следующую конструкцию: 


<НТМЬ> 
<НЕАО><Т1Т1 Е>Физические и логические стили</Т1Т1 Е></НЕАО> 
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2% Физические стили * Мсгозой метле Ехр!ог 


” ввйп РРавка Виа Избранное Сервис Споры 


{ 


- 


> остановить Обновить 


"Ваал . Виериле 


Полужирный 
Курсив 
Подчеркнутый. 
Вычеркну!ый 
Пишущая машинка 
Полужирный курсив 


Полужирный_курсив подчеркнутый. 


пе готово 


Г ада 


Рис. П1.6. Физические стили 


т Физические и логические стили - Мсгозой ищете! ЕХрое! № 
| Фёдл Правка ` Виа. Избранное Сёреие Сгоавка _ | ие 
ДА Деле. ЕТ ДЕМКА м 


Это -.модифицированныйзаголовок 2-го 


Рис. П1.7. Изменение части заголовка 


<ВОБу> 

<Н2>Это - <1>модифицированный</1> заголовок 2-го уровня</Н2> 

</ВОБУ> 

<интме> 
С помощью специального тега <НОМТ> можно настроить шрифт для изображения 
текста: задать гарнитуру, размер и цвет. Прежде всего вы можете установить раз- 
мер основного шрифта, который используется в документе по умолчанию. Тег 
основного шрифта имеет формат <ВАЗЕЕНОМТ 512Е=размер шрифта>. 


Размер основного шрифта можно установить от 1 до 7. Если не использовать этот 
тег, то размер основного шрифта по умолчанию устанавливается равным 3. 


Тег ЗЮМГ 517Е=размер шрифта> используется для установки размера текущего 
шрифта в отдельных фрагментах текста. На стили этот тег не влияет. Диапазон 
возможных значений — от 1 до 7. Данный тег позволяет также управлять разме- 
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ром текущего шрифта относительно основного. Для этого используются символ 
«+» (чтобы увеличить) и символ «-»(чтобы уменьшить размер шрифта на задан- 
ную величину). Например, если размер основного шрифта установлен равным 3, 
то тег <НОМГ 5УМЕ=+2> устанавливает размер текущего шрифта равным 5. 


Для задания гарнитуры шрифта используется тег ЗНОМГ РАСЕ="имя_шрифта">. 
Пример 
<РОМТ РАСЕ = "Аг!а|" > 


Если этот тег не используется в вашем НТМГ-документе, то браузер будет при- 
менять шрифт, установленный в настройках. Поэтомутекст на экране пользова- 
теля может выглядеть совсем не так, как вы себе его представляли. Следует также 
иметь в виду, что если назначенный вами шрифт не установлен на компьютере 
пользователя, то браузер будет изображать текст шрифтом, установленным по 
умолчанию. В теге <НОМГ> вы можете указать через запятую перечень шрифтов. 
В этом случае браузер будет использовать первый найденный шрифт. 


Пример 
<ЕОМТ КАСЕ="Агга| Заз бегиЁ, _Соигег"> 


Обычно в перечне задают похожие шрифты. Рекомендуется назначать наиболее 
популярные шрифты. При размещении на странице текстовой информации луч- 
ше вообще не назначать название шрифта, полагаясь на стандартные настройки 
браузера. Но тогда при разработке страницы следует также использовать стан- 
дартные настройки браузера, чтобы синхронизировать свое восприятие текста 
с возможным восприятием пользователя. В конце концов, вы создаете страницу 
не для себя, а для читателей. 


С помощью атрибута СООВ в теге <НОМГ> можно задать цвет шрифта: 
<РОМТ С01Ж="“цвет"> 
Аргумент атрибута СООК представляет собой шестнадцатеричную запись кода 


цвета (красной, зеленой и синей составляющей, или, иначе говоря, КО В-состав- 
ляющей). Следующая программа демонстрирует управление шрифтом (рис. П1.8).: 


‚2 становка шрифтов -М!стозой Чегле! Ехр!ой* 


ФаШ Правка Ву игранное: Сервис; Справка 
и — 2] 72] а 
Остановить  ОЙновмп. Домой Поиск | 
| Прифт Ава АБВГДЕЖЗИК 


Шрифт Соийег АБВГЦЕЖЗИК 


| Шрифт ЗУМВОГ | 


& Готов 2] Моя камаьклер 


Рис. П1.8. Использование различных шрифтов 
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«нтмь> 

<НЕАО><Т1Т1_Е>Установка шрифтов</ТИТЕ.></НЕАО> 

<ВОруУ> 

<Р>Шрифт АмаКЕОМТ РАСЕ="АНИАЕ">АБВГДЕЖЗИК </ЕОМТ> 

<Р>Шрифт Соимег<РОМТ РАСЕ="СО1ШЕТГ>АБВГДЕЖЗИК </ЕОМТ> 

<Р>Шрифт $УМВОЕ<РОМТ  ЕАСЕ=“"$ЗУМВОЕ" —$517Е=7 С010К="ЯЕО">АБВГДЕЖЗИК </РОМТ» 
</вов\> 

<иНтме> 


Заметим, что в теге <НОМГ> можно использовать несколько его атрибутов или все 
возможные. 


Пример 
<РОМТ РАСЕ="Ата!" $2Е=5 СОБОВ=“ВЦИЕ"> 


В математических формулах, а также для подстрочных замечаний часто приме- 
няются индексы, которые отличаются от основного текста положением относи- 
тельно строки (чуть выше или ниже) и размером (рис. ПТ.9). Для этой цели слу- 
жат теги <ЗЧР> и <5ОВ> — соответственно для верхних и нижних индексов. 


<НТМЬ> 

<НЕАО><Т1Т1_Е>Индексы< /ТТТЬЕ>< /НЕАО> 

<ВОПУ> 

<НЗ>Пример использования индексов 
<Р>(5+х<$УР>2</$УР>)<$УР>х+3</БУР> 
<Р>а<50В>К/ЗИВ>+ а<50В>2</50В>+ а<50В>3</50В> 
<Р>Подстрочные примечания <50Р>2</50Р> 

</НЗ> 

</ВОПУ> 

</НТМЫ> 


Файп Празка Вид Избранное Сервис ие | 
у || 


ыы 


Остановить - Обновить 


Пример использования индексов 


Подстрочные примечания* 


Г Гокаюю > г И | Мой комкькяе 


Рис. П1.9. Использование верхних и нижних индексов 
Кроме рассмотренных выше, имеются дополнительные теги форматиро вания тек- 
стов: 


. <АПООКЕ> — выделение адресов электронной почты, почтовых адресов и номе- 
ров телефонов; 
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. <ЗСПЕ> — выделение цитат; 
. <СОБЕ><ЗАМР> —запись текстов программ, символьных констант; 
. <КВО> — ввод текстов с клавиатуры. 


В последних трех стилях используется моноширинный шрифт (обычно Соппег). 
Например, символ «1 данного шрифта занимает столько же места, сколько и буква 
«Ж». Использование таких шрифтов обусловлено простой возможностью вырав- 
нивания текста с помощью символа пробела. 


Отметим еще один момент. В теги управления шрифтом, как и в теги логических 
стилей, можно вставлять атрибут Т1Т1Е="строка", что позволяет привязать к тек- 
сту внутри этого тега ввплывающую подсказку. Аргументом атрибута ТПТЕ явля- 
ется строка подсказки. При остановке курсора мыши на выделенном слове или 
фразе около курсора появится подсказка. С помощью этого приема можно рас- 
шифровывать аббревиатуры, давать дополнительные пояснения и рекомендации 
пользователю. 


Цвет 


По умолчанию браузеры заполняют фон сплошным цветом, определенным на- 
стройкой браузера: серым, белым или черным. Пользователи по-разному настра- 
ивают цвета, поэтому иногда имеет смысл принудительно зафиксировать цвет 
фона или создать фоновое изображение. Если вы не позаботитесь об этом, в худ- 
шем случае пользователь не сможет прочитать синий текст на черном фоне. Фо- 
новый цвет задается в теге <ВОБ\>. 


Цвет фона определяется атрибутом ВООСООК тега <ВОБУ>. Например, тег, задаю- 
щий цвет фона "#ЕЕ1230", имеет вид: 

<ВОПУ ВОСОГОК="#ЕЕ1230"> 
а желтый цвет фона — следующий вид: 

<ВОБУ ВбСОГОВ="УЕЦОМ"> 
Можно задать и цвет текста. Для этого служит атрибут ТЕХТ тега <ВОБу>. Тег, при- 
веденный ниже, задает зеленый цвет фона и синий цвет для текста: 

<ВОБУ ВССОЕОВ="СНЕЕМ" ТЕХТ="ВЕУЕ"> 


Как уже было сказано, цвет можно указывать по имени и шестнадцатеричным 
кодом. Ниже приводится таблица соответствий некоторых имен цветов и их шест- 
надцатеричных представлений. 


Таблица 01,2, Таблица соответствий имен цветов и их шестнадцатеричных представлений 2% 
Цвет Имя цвета Шестиадцатеричное представление 
Черный ВЕАСК #000000 

МАМ #000089 

ЭИ\МЕВ #С060С0 
Синий ВШЕ #ООООЕЕ 

МАВООМ #800000 
Пурпурный _ РИВРЕЕ #800080 


— о продолжение 1 
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Таблица П1.2 (продолжение) 


Цвет Имя цвета Шестнадцатеричное представление 
Красный А ЗРЕОООО 
РОСНУА #РЕООЕР 
Зеленый СВЕЕМ #008000 
ТЕАЕ #008080 
ИМЕ ЗООЕРОО 
АСУА #ООРЕЕЕ 
ОНМЕ #808000 
Серый СВЕУ #808080 
Желтый УЕЦОМ/ #РРЕЕРОО 
Белый М/НИТЕ : #РЕЕЕЕЕ 


Текст заданного формата 


Браузер обычно преобразует текст НТМГ -файла при выводе его на экран, то есть 
игнорирует лишние пробелы, символы табуляции и символы конца строки. Если 
вы хотите, чтобы текст на экране выглядел так, как вы его ввели в НТМГ-доку- 
мент, то воспользуйтесь тегом предварительного форматирования <РВЕ>. Текст 
должен находиться между тегами <РКЕ> и </РКЕ>. 


Списки 


Довольно часто требуется разместить на странице списки (перечни элементов). 
Списки бывают неупорядоченными и упорядоченными (по алфавиту или по циф- 
рам). При отображении списков браузер выделяет их отступом от края страницы. 
Кроме того, списки могут быть вложенными. 


Упорядоченные списки задаются тегом <О>, а неупорядоченные — тегом <ЧТ>. 
Оба эти тега парные, то есть контейнерные. 


Для упорядоченных списков можно выбрать способ индексации. Это делается с по- 
мощью атрибута ТУРЕ с аргументами: | (арабские цифры), А (прописные буквы), 
а (строчные буквы), [ (римские цифры). Можно задать номер, с которого начина- 
ется нумерация элементов списка. Для этого служит атрибут ЭГАКГ внутри тега 
<ОТГ>. 


Перед элементами списков следует поставить тег <>, чтобы индексация проис- 
ходила автоматически. В этом теге можно использовать и вышеописанный атри- 
буг ТУРЕ. 


В листинге П1.1 приведены примеры, показывающие различные способы созда- 
ния списков (рис. П1.10). 


Листинг П1.1. Различные способы создания списков 
<НТМ1> 
<НЕАО><Т1Т1Е>Списки</ТТТЬЕ>< /НЕАР> 
<ВОПУ> 
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29 Списки - Мегозой иегпе! Ехргег _ р з- 
' заил Правка Вид Избранное Сервис 


Справка 


Я } Остановить Обновить Домой Пыкк 


Списки 


Это - упорядоченный список.Начальный номер - 5 


| 5. Элемент 
| 6. Элемент 
| 7. Элемент 
8. Элемент 


Это-упорядоченный список. Нумерацияримскими цифрами 


1. Элемент 
й. Элемент 
Ш. Элемент 
№. Элемент 


Это - неупорядоченный список. Здесь используются различные вводные 
' маркеры 


ЕТУ РЕН ИН ВИИНИИЕ тик 


‚ Элемент 

‚ Элемент 
| « Элемент 
| * Элемент 


=] Гы! 050 Пе В | 51 Мой комньклер. 


РИС. 11.10. Варианты списков 


<Н2>Списки</Н2> 

<Р>Это - упорядоченный список. Начальный номер - 5<ВВ> 

<ОЬ ТУРЕ=1 СТАВТ=5> 

<1Л>Элемент 

<1,>Элемент 

<1Л>Элемент 

<гт>Зпемент 

</01> 

<Р>Это - упорядоченный список. Нумерация римскими цифрами <ВВ> 
<ОЬ ТУРЕ=1> 

<11>Элемент 

<1Л>Элемент 

<1_1>Элемент 

<Ё1>Элемент 

</ОЕ> 

<Р>Это - неупорядоченный список. Здесь используются вводные маркеры <ВК> 
<> 

<11>Элемент 

<11 >Элемент 

<11>Элемент 
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<1_1>Элемент 
</цЕ> 
</вовБу> 
</НтмЕ> 


Разделительные полосы 


При оформлении текста, чтобы отделить один раздел от другого, нередко исполь- 
зуют разделительные полосы. Можно задать ширину, толщину и способ вырав- 
нивания разделительной полосы. Разделительная полоса задается тегом <НЁ>, 
внутри которого можно вставить атрибуты: 

. 5 7Е — толщина в пикселах; * 

. УМШОТН — ширина в пикселах; 

. АШОМ — способ выравнивания (принимает значения СЕМТЕВ, ТЕЕГ или КОНТ); 


кроме того, можно использовать атрибут №ОБНАПЕ для создания сплошной чер- 
ной полосы без тени. 


Ниже приведен пример задания разделительных полос (рис. П1Т.11). 


МСЛМои докыментьЛКнигаЧподосы \\/о - Миожой ЕЯ 
| Файл Правка Вид Избранное Сервис Справна 
и 2 а) Я Е 

Осюноанть Обновшь Домой Поиск 


г, х =] | 
Р азделительные Полосы 


Для отделения частей текста можно нспользовать | 
разделительные полосы. Такие полосы вставляются 
тегом НИ. 

Это - обычная полоса, заданная без указания атрибутов 


Можно задавать различ ные толщину и ширину 
поло с. Это - полоса толщиной 5 


Это - полоса толщиной 10 и шириной 200 | 


Это - полоса толщиной 5, задан Я с атрибутом 
МОЗНАОЕ 


иоякомяеютерв 


Рис. П1.11. Разделительные полосы 
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<НТМЬ 

<ВОГУ ВССОГОВ="Н#ЕОЕОЕО"> 

<Н1>Разделительные полосы<Н1> 

<НЗ>Лля отделения частей текста можно использовать разделительные 
полосы.Такие полосы вставляются тегом НВ.<ВВ> 

Эю - обычная полоса, заданная без указания атрибутов 

<НВ> 

Можно задавать различные толщину и ширину полос. Это - полоса толщиной 5 
<НК $17Е=5> 

<Р>Это - полоса толщиной 10 и шириной 20 

<нв З10Е21 У\ОТН=200> 

<Р>Это - полоса толщиной 5, заданная с атрибутом М№НАГЕ 

<НВ УТ2Е=5 МОЗНАРЕ> 

<НЗ> 

</ВОПУ> 

</НТМЬ> 


Задав равные небольшие значения для высоты и ширины, получим квадратик, 
который можно использовать в качестве маркера для разделения частей страни- 
цы или элементов списка. Однако в этом случае требуются специальные средства 
позиционирования элементов. 


Бегущая строка 


Пиегпеё Ехр]огег поддерживает тег <МАВООЙЕЕ>, который позволяет создать так 
называемую бегущую строку, то есть эффект прокручивания текста в заданном 
поле. Характеристики бегущей строки задаются следующими атрибутами: 


. УМОТН — ширина поля бегущей строки в пикселах или процентах от ширины 
окна; 


. ННОНГ — высота поля бегущей строки (в пикселах); 


Н5$РАСЕ, УЗРАСЕ — интервалы по горизонтали и вертикали между текстом стро- 
ки и краями ее поля (в пикселах); 


. АПОМ — определяет положение текста бегущей строки в ее поле; возможные 
аргументы: 


° ТОР (вверху); 
а ВОПОМ (внизу); 
О МОЫЕ (посередине); 
. ПКЕСПОМ — определяет направление движения; возможные аргументы: 
. 1ЕЕГ (справа налево); 
1] ВОНТ (слева направо); 


ВЕНАМОК — характер движения строки; возможные аргументы: 


 УЭСВОЦ, — текст появляется от одного края и скрывается за другим; 


О УШЕ — строка вытягивается из одного края поля и останавливается у дру- 
гого края; 


* АГТЕВМАТЕ — задает переменное направление движения, от одного края к дру- 
гому, а затем обратно; 
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. ГООР — количество повторений текста в бегущей строке, задаваемое числом; 
если необходимо «бесконечное» количество повторений, то следует задать ар- 
гумент в виде ключевого слова ПМЕМПУ. Атрибут ГООР не влияет на поведение 
бегущей строки, если для атрибута ВЕНАМОК заданы аргументы АГТЕКМАТЕ или 
УЦШЕ; 

* ЭСКОПАМОЧМГ — устанавливает длину в пикселах «прыжка» текста за один такт; 
при большом значении этого параметра текст движется рывками, а при ма- 
лом — замедленно; 


‚5 ГГАУ — определяет величину паузы между тактами перемещения тек- 
ста в миллисекундах; 


. ВОСЯОК — устанавливает цвет поля бегущей строки, задаваемый шестнадцате- 
ричным числом или именем. 


Соотношения между длиной текста, размером шрифта и скоростью перемещения, 
при которых бегущая строка выглядит приемлемо, подбираются опытным путем. 


В следующем примере бегущая строка «бесконечно» прокручивается на желтом 
поле шириной 75% от ширины окна браузера (рис. П1.12). 


12 богущоя строка - Мелозой Иен Ехркии Автономная рабана} ВЯРТЕЗ 


Фаян Правка Вид Ибранное Сервис Справка ® 


ЗновитЬь 


Е В Ве Ир - 


| Ниже расположена "бегущая строк 
| 


щение будет Прокручив: 


| 
] 
| 
| 


Рис. П1.12. Бегущая строка 


<НТМЕ> 

<НЕАО><Т1Т1Е>Бегущая строка</Т1Т1Е ></НЕАО> 
<ВОПУ> 
Ниже расположена "бегущая строка" 

-. ННОНТ = 50 МОГ Н=75% Н$РАСЕ=5 УЗРАСЕ = 5 АИСМ=ТОР ВСООГОВЕМЕЦОМ 
ПЛВЕСТЮМ = ТЕЕРЧ, ООНМИМПЕ ВЕНАМОВ=ЗСВОП. `5СВОПАМООМТ=5 
5СКОГГОЕГАУ=100> 
<Н!> Эю сообщение будет прокручиваться на экране справа налево</Н1> 
</МАВОЧЕЕ> 
</ВорУ> 
<НТмт> 


Специальные и зарезервированные символы 


При формировании Н ! №1 жумента может пробоя ›оваться ввести символы, ко- 
торые воспринимаются браузером как служебные. Например, нельзя использо- 
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вать символы < и > для обозначения знаков «меньше» и «больше», так как они 
интерпретируются как символы тегов. Кавычки (") и амперсанд (&) также исполь- 
зуются в языке НТМЕГЕ для служебных целей. Кроме того, все символы, которые 
можно набрать при нажатых клавишах управления, отличных от ЗЫ, могут не 
воспроизводиться при просмотре НТМГ-документа, поскольку они зарезервиро- 
ваны. 


ВНИМАНИЕ — =— 


Вместо зарезервированных символов в текст следует вставить их буквенные эквиваленты 
или коды АЗС. В качестве буквенного эквивалента используются соответствующие со- 
кращения. 


Буквенный эквивалент имеет формат: 
&буквенный_эквивалент; 
Например, &1; обозначает символ < (1ез5 еп, меньше чем). 
Цифровой эквивалент имеет формат: 
&#код_А5СП; 
Например, символ < можно вставить в документ как &#60;. 


Таким образом, эквиваленты заключаются между символами & и точкой с запя- 
той. При этом в случае цифрового эквивалента перед АЗСП-кодом символа сле- 
дует поставить символ #. На рис. П1.13 представлена таблица эквивалентов для 
некоторых часто употребляемых зарезервированных символов. Данная таблица 
сформирована как НТМТ-документ. В листинге П1.2 приведено его содержание 
как пример использования специальных и зарезервированных символов. 


Листинг П1.2. Код таблицы эквивалентов некоторых зарезервированных символов 
<НТМЬ> 
<НЕАО><ТИТЕЕСпециальные — символьк/ИТЕЕ></НЕАО> 
<Н2> 
<ЗАМР> 
Симв.Код Эквивалент<В(?> 
<НВ> 
&#34;&#160;&#160;&#160; 34аиое<ВВ> 
&#38;&#160;&#160;&#160; 38 жир<ВВ> 
&#60;&#160;&#160;&#160;: 60 0<ВВ> 
&#62;&#160;&#160;&#160): 62 =<ВВ> 
&#160;&#160;&#160;. 160 пБзр<ВВ> 
&#162:&#160;&#160; 162 сеш<ВВ> 
&#163;&#160;&#160; 163 роша<ВВ> 
&#167;&#160:&#160; 167 зес<ВВ> 
&#169;:&#160;&#160; 169 сору<ВК> 
&#174;&#160;&#160; 174 гег<ВВ> 
177;&#160;&#160; 177 ризши<ВВ> 
&#181;&#160;&#160; 181 писго<ВВ> 
&#182;&#160;&#160; . 182 рагах<ВВ> 
&#188;&#160;:&#160; 188 {1гас!4<ВВ> 
&#189;:&#160;&#160; 189 гас!2<ВВ> 
&#190;&#160;&#160; 190 гас34<ВВ> 
&#198;&#160;&#160; 198 АЕ =<ВВ> 
&#216;&#160;&#160; 216 ОЗ1азй<ВВ> 
&#230;&#160;&#160; 230 аей2<ВВ> 
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&#247:8#160:8#160; 247 амае<ВВ> 
</Н2> 
<ИНТМЬ> 


Файт Правка Вид  Избранно( Сервис и = 
т ь м | 5 [#2 х 


[ | < ] 


Симв.Код Эквивалент 


6 34 ацое 
& 38 атр 
< 60 ще 
У ‹ 162. ные | 
160 пЬзр | 
$ 162 сепе 
Е 163 ронпа 
$ 167 зесЁё 


1 
© 169 сору | 
174 теё | 
177 рати 

| 


Е 


хошыхнянзан 


181 писто 

182 рага 

188 гас!4 

189 гас!2 |] 

190 ггасз4 | 

198 АЕП= й 

216 Озазь 

230 аей> Ш 
247 аглае ы 


_ вн 8] 


| 


Мом корчпьлотер 


Рис. П1.13. Таблица эквивалентов для некоторых зарезервированных символов 


Тег <ЗАМ Р> применен только для того, чтобы использовать моноширинный шрифт. 
Многократное использование символа &#160; (пробел) связано с тем, что браузер 
сокращает количество «лишних» пробелов, введенных с клавиатуры, а они были 
необходимы для задания достаточно большого расстояния между столбцами таб- 
лицы. 


Графика на веб-страницах 


В большинстве веб-страниц встречается графика. Она позволяет красочно и на- 
глядно представить информацию. Во многих случаях лучше показать изображе- 
ние, чем давать длинное текстовое описание. 
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Существует два способа размещения изображений на странице: 
. вставка отдельных изображений; 
. заполнение фона рисунком. » 


В любом случае графический объект берется из файла. 


Вставка изображений 


Вставка на страницу изображения из файла графического формата производится 
с помощью тега <МО> (от аш/: Ппазе — изображение) с указанием адреса файла 
в качестве аргумента атрибута 5КС: 

<Ма 5КС="адрес графического файла"> 


Адрес графического файла — это либо ЧВГ-адрес, либо имя файла, возможно, 
с указанием пути. 


Например, для показа графического файла 10ог0йр.]ре следует написать тег 
<1МС 5ВС = "1одолр. . 2р9"> 


Для увеличения скорости передачи изображения в теге <МО> можно использо- 
вать атрибут (дополнительный параметр) ГОМБКС, который принимает в качестве 
аргумента адрес графического файла. Вы можете создать дёа графических файла: 
один (например, пусть это файл 10о9р.]рх) содержит изображение, полученное 
с высоким разрешением, адругой (например, 1о2ойр.!) — рисунок, полученный 
с низким разрешением. Тогда тег 

<1ТМС 5$ВС="ТодоЕ1р.)ра" ГОМ$ВС="ТодоЕ1р. а1Е"> 


предпишет браузеру сначала загрузить файл 1огойр.еШ, а затем по мере загрузки 
страницы заменить его файлом 1о5оНр.]ре. 


Другой способ ускорения загрузки графики заключается в задании размеров изоб- 
ражения с помощью атрибутов \МОТН (ширина) и Н—ИОНТ (высота), измеряемых 
в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под гра- 
фику, подготовит макет документа, отобразит текст и только потом загрузит гра- 
фику. Заметим, что браузер сжимает или растягивает изображение, встраивая его 
в рамки указанного размера. Пример указания размеров изображения: 

<Ма $ВС="1одо11р .9 М" \МОТН=40 НЕФНТ=20> 


Здесь атрибут \МРЛН задает ширину прямоугольной области, в которой будет раз- 
мещено графическое изображение, а Н—СНТ — высоту. 


Графика обычно используется вместе с текстом, поэтому возникает задача вырав- 
нивания текста и изображения. Эта задача решается с помощью атрибута АНОМ 
тега МО > с применениемразличныхаргументов. Например, мы можем пожелать, 
чтобы текст обтекал рисунок справа или слева. Обычно изображение встраивает- 
ся вплотную с текстом, что может быть некрасиво. Чтобы этого избежать, можно 
задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов 
УБРАСЕ для верхнего и нижнего полей и НЗРАСЕ для боковых полей в теге МО>. 
Аргументы этих атрибутов указываются в виде чисел, определяющих размеры 


полей в пикселах. Для отмены обтекания графики текстом служит тег <ВВ 
СТЕАВ=....>. 
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Следующий тег задает обтекание графики из файла 102ойр.]р® справа (изображе- 
ние будет находиться слева от текста): 

М@ $НАС="”юодотр.]"Рд" АНСМЕЕРТ> 
Если требуется расположить графический объект справа от текста, то необходи- 
мо атрибуту АПСМ присвоить аргумент КЮНГ 

<Мо5ВС="юзойр.]Рэ"АТЛОМ = ВЮНТ> 
Чтобы задать поля вокруг иллюстрации, следует написать тег вида: 

<1 Ма 5ВС="озо@р.]р5" АНОСМ = ГЕЕТ Н5РАСЕ=Х УЗРАСЕ=10> 
Здесь числа 20 и 10 определяют размеры полей. 


Рассмотрим пример совместного использования графики и текстов. Вызовите 
Блокнот (текстовый редактор Мо{ераа). Напишите в нем НТМГ-код с использо- 
ванием рассмотренных выше тегов. Ниже приводится программа, выводящая 
некоторый текст и графику (рис. П1.14). В качестве графического файла мож- 
но использовать любой из имеющихся у вас файлов. Здесь используется файл 
10ого@р.2И. 


м 
т 


Г а 


*а Упражнение 1 - Метозой |пегпеЕ Ех ше о В ь ;арху 
Файл Правка Вид Избранное `Сарвис’ Спозека - |= | 
27 8 3 аПожк НИббранное |^_ " бими® 


_ Текст обтекает 
графику справа 


СУ 
д 


_ | использования текста и графики. 
° | Текст программы НТМЕ можно 

| писать в любом текстовом 
С редакторе. При этом используются 
| тети разметки текста. 


Этот текст выводится с нового 
абзаца. Чтобы сделать это, мы 


использовалиспециальныйтег. 


Попробуйте изменить размеры окна Вашего браузера. Обратите 
внимание, какизменяетсярасположениетекста. 


Га} Готово | 


Рис. П1.14. Совместное расположениетекста и графики 


<НТМГЕ> 

<НЕАО> <ТТТЕЕ> Упражнение | </ТТТЬЕ> 
</НЕАБ» 

<ВООбУ ВССОГОВ=" УЕНСОМ" > 
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Мо 5ВС="ор2ойр.»!" АПОМ=ГЕЕТ» 

<НРТексг обтекает графику справа</Н1> 

Эю - пример совместного использования текста и графики. <ВВ> 
Текст программы НМ можно писать в любом текстовом редакторе. 


При этом используются теги разметки текста. 
<> 


Этот текст выводится с нового абзаца. Чтобы сделать это, мы использовали 

специальный тег. 

<> 

Попробуйте изменить размеры окна Вашего браузера. Обратите внимание, как 

изменяется расположение текста. 

<ВОБУ> 

<иНтмг> 
Широкие возможности точного позиционирования изображений (как и других 
элементов) на странице предоставляют таблицы и стили. Эти элементы НТМЕ 
будут рассмотрены позже. Например, вы можете определить таблицу без види- 
мых рамок, а в ячейках этой таблицы разместить рисунки, тексты и другие эле- 
менты. 


Фоновая графика 


Чтобы украсить страницу, можно заполнить фон изображением из графического 
файла. Фоновое изображение — это файл, содержащий рисунок (желательно не- 
большого размера), который многократно выводится на экран, заполняя все окно. 


Рисунок может представлять собой небольшой прямоугольник или же длинную 
узкую полоску (например, залитую градиентом). 


Фоновая графика задается в теге <ВОБ\У> в начале НТМГ-документа, подобно тому 
как задается цвет фона. При этом используется атрибут ВАСКОВОЦКЮО, значением 
которого является имя графического файла. Например, если мы хотим для фона 
взять файл Юп.е{, то соответствующий тег будет выглядеть так: 

<ВО0У ВАСКСВОЧУМО=" Топ. 911" > 


Для браузера Пицегпе{ Ехр]огег можно использовать дополнительный атрибут 
ВОРКОРЕКПЕ$=НХЕО, запрещающий прокрутку фона в окне экрана. Например: 
<ВОБУ ВАСКСВОУМО="+0п.9!" ВСРВОРЕВТИЕ$ = РХЕО > 


ВНИМАНИЕ - 


Следует иметь в виду, что существуют неграфические браузеры, а в графических браузе- 
рах пользователи могут отключать загрузку графики, поэтому можно задать и текстовое 
описание графики, встроенной в документ, то есть описать изображение или указать раз- 
мер и формат графического файла. 


При наличии текстового описания пользователь графического браузера сможет 
сам решить, стоит ли загружать тот или иной графический файл или лучше не 
тратить на это время. Подмена графики текстом осуществляется с помощью ат- 
рибута АГТ в теге МС>. 
Пример 

<1М6 $ВС="1одойр. 91!" АЁТ=” [Логотип, 9 18К]"> 
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Ссылки 


Ссылки (или гиперссылки) позволяют щелчком кнопкой мыши на выделенном 
тексте или изображении перейти к другому файлу или фрагменту страницы. Ссыл- 
ки применяются в большинстве существующих страниц. Они могут быть тексто- 
выми и графическими. Текстовые ссылки представляют собой выделенное слово 
или целую фразу. Выделение ссылки производится цветом или подчеркиванием, 
в зависимости от настройки браузера. 


В языке НТМЕ структуры текстовых и графических ссылок подобны друг другу. 
Все они задаются тегом <А НВЕЕ>, которому соответствует закрывающий тег </А>. 
В ссылке сначала указывается имя файла, на который она ссылается, а затем текст 
или имя графического файла, содержащего изображение ссылки. Кроме простых 
графических ссылок можно создать так называемую графическую карту ссылок: 
изображение с областями, щелчок на которых приводит к срабатыванию соответ- 
ствующих ссылок. 


Текстовые ссылки 


Структура текстовой ссылки имеет следующий вид: 

<А НКЕР="адрес ссылки"> текст ссылки </А> 
Обратите внимание, что тег ссылки имеет закрывающую часть </А>. 
Например, следующий тег описывает ссылку на НТМТ-файл Докум2.т, при этом 
ссылка на экране будет представлена текстом Щелкните здесь: 

<А. НВЕЕ="4ОКУМ2.5ип"> Шелкните здесь </А> 
Отметим, что браузер не выводит на экран имя файла, к которому требуется пе- 
рейти по ссылке, а лишь показывает текст, заключенный в теге между угловыми 
скобками > и <. Если же вы хотите, чтобы внешне ссылка выглядела как имя фай- 
ла, на который она ссылается, то просто напишите его имя вместо текста. 
Пример 

<А НКЕР="докум2.Вит"> докум2.Вни </А> 
Можно ссылаться не только на другие файлы, но и на свой собственный файл. 
Поскольку настройки цвета в браузере у различных пользователей могут отли- 
чаться, возникает задача принудительно задавать цвета, чтобы ссылки были хо- 
рошо видны. Выше мы уже рассматривали, как задать цвет фона и текста. Это 
делается в теге <ВОБУ> с помощью атрибута ИМК для непрочитанной ссылки 
и УШМ — для прочитанной ссылки. 


<ВоруУ ВбСОГОВ= "#303031 ЕХТ МК="СВЕЕМ" МЕТМК 


Графические ссылки 


Структура графической ссылки имеет вид: 

<А НЯЕР="адрес_ ссылки"> «Мб 5(?С="имя_графического файла"> </А> 
Например, следующий тег описывает ссылку на НТМГ-файл доку м2.И1т, при этом 
ссылка на экране будет представлена изображением из файла 1050 р.21Ё 

<А НВЕЕ="НОКУМ2.н1т"> <МС $ВС="1одойр.9!"> </А> 
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К графической ссылке можно добавить поясняющий текст, как это сделано ниже: 


<А НКЕЕ="НОКУМ2.В1м"> <1Мб 5КС=" [ово р. 1!" ></А> Щелкните здесь 

В рассмотренных выше графических ссылках одному изображению соответство- 
вал один адрес ссылки. Однако имеется и другая возможность. Она заключается 
в том, чтобы одному изображению сопоставить несколько ссылок, привязав каж- 
дую из них к некоторой области изображения. Такие области называют горячи- 
ми, асам технологический прием — графической картой ссылок, или сегментиро- 
ванной графикой. Горячие области графической карты могут быть различной 
формы: прямоугольной, многоугольной или в виде окружности. Это очень удоб- 
ный прием оформления группы ссылок, однако при выборе рисунка, служащего 
основой карты ссылок, следует стремиться к тому, чтобы границы горячих облас- 
тей были хорошо очерченными и не пересекались. Кроме того, необходимо поза- 
ботиться о том, чтобы пользователь понял, что имеет дело с картой ссылок, а не 
просто с графическим фоном. Для этого можно использовать поясняющие тек- 
сты. При наведении на горячую область курсор мыши изменяет свою форму как 
и при использовании обычных ссылок. При щелчке на горячей области ее грани- 
цы становятся видимыми. 


Графическая карта задается с помощью нескольких тегов. Первым является тег 
<МАР> (карта) с атрибутом МАМЕ для указания имени карты. Имя карты выбирает- 
ся как имя переменной. Далее между тегами <МАР> и </МАР> следуют теги <АВЕА> 
(область) для задания горячих областей. Тег <АВЕА> имеет ряд атрибутов, описы- 
вающих собственно ссылку, а также форму и положение горячей области: 


. НКЕЕ — строка, определяющая адрес ссылки; 

. ЭНАРЕ — определяет форму области; принимает аргументы: 
® '"ВЕСГ' (прямоугольник); 
О "РОМСОМЕ" (многоугольник); 
. "СОВАЕ' (круг); 

. ОСООКЬ — координаты области, которые задаются в виде перечня чисел, разде- 
ленных запятыми; весь перечень заключается в кавычки (для прямоугольника 
задаются четыре числа — координаты верхнего левого и правого нижнего уг- 


лов; для многоугольника задаются координаты каждого угла; для круга зада- 
ются три числа — координаты центра и радиус). 


После закрывающего тега </МАР> следует указать тег, вставляющий изображение 

и реализующий привязку карты к нему, — это уже известный тег <1МО>, в котором 

помимо прочих возможных атрибутов используется атрибут связи с картой: 
и$ЕМАР="#имя_карты" 

В качестве имени карты указывается аргумент атрибута МАМЕ тега <МАР>. 

В нашем примере в основе графической карты ссылок находится топографиче- 

ская карта некоторой местности. На ней мы определили прямоугольную и круг- 

лую горячие области, соответствующие двум населенным пунктам. При щелчке 

на горячей области будет выведен документ северный.Вбп или южный.В@т, содер- 

жащий, например, описание соответствующего населенного пункта. 


<НТМЕ> 
<НЕАО><Т1Т1_Е>Графическая карта</ИТЕЕ></НЕАО> 
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<МАР МАМЕ="таро"> 

<АВЕА НВЕЕ= "сеВерНои!.щ" $НАРЕ="ВЕСТ" С00В3= "150,100,250,250"> 

<АВЕА НВЕЕ = "южный. 1т" ЗНАРЕ = "С1ВСЬЕ" СООВО$="150,380, 50"> 

</МАР> 

<М@ $АС="Кар!а.]рд" ЧУЗЕМАР="#тар0" \ММОТН=360 НЕСНТ=480> 

</нтмЕ> 
Графические карты ссылок обычно используются для создания красочных меню, 
а также в тех случаях, когда внешний вид страницы формируется с помощью гра- 
фического редактора (например, Адофе РпотозВор), в котором можно создать кар- 
тинку со всеми необходимыми надписями и художественными элементами — это 
альтернатива использованию множества тегов, вставляющих различные элемен- 
ты. Основная трудность заключается в определении координат горячих областей. 
Однако если известны ширина и высота всего изображения, то координаты горя- 
чих областей можно рассчитать хотя бы приблизительно, а затем уточнить опыт- 
ным путем при отладке. Задача существенно упрощается при использовании та- 
кого средства проектирования веб-страниц, как Егоп{Разе. 


ЦВЕ-адреса ссылок 


В рассмотренных выше примерах в качестве адреса ссылки использовалось имя 
файла. В общем случае можно применять ОВГ-адрес (попа Везоигсе Госафог - 
унифицированный указатель ресурса). Формат ОВГ-адреса включает в себя тип 
сетевой службы (протокол связи), адрес сервера, путь поиска и имя файла. 


Ниже перечислены (КГ наиболее популярных служб Интернета (табл. П1.З). 


Таблица П1.3. ЦВЕ наиболее популярных служб Интернета 


Служба в Интернете УВЕ-адрес 
М/опа \Мае \МеБб ПИр: 

ЕТР 

Май тащо: 
Сорйег борвег: 
Телеконференции Уземе пемз: 


Если вы указываете адрес, начинающийся с Пр, тем самым вы обращаетесь к ре- 
сурсам, доступ к которым осуществляется по протоколу НТТР (Нурег Техе Тгап$- 
г Ртоюсо! — протокол передачи гипертекста). Этот протокол используется 
в качестве основного в Интернете при передаче информации, находящейся 
в НТМЕ-документах. 


Префикс адреса Ир означает, что следует использовать протокол передачи фай- 
лов (ЕЦе Тгап$Еег Рготосо|! — ЕТР). Этот протокол используется при передаче 
файлов-программ, имеющих расширение .ехе. Он может использоваться при пе- 
ремещении любых файлов с одного компьютера надругой. В частности, при пере- 
качке файлов вашей страницы на сервер используется именно этот протокол. 
Протокол ЕТР обеспечивает высокую надежность передачи файлов. К примеру, 
если потерю до 10% обычной текстовой информации еще можно пережить, то при 
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передаче программы вообще не допускается потеря — неточно переданная про- 
грамма просто не будет работать. 


Если перед адресом ссылки указывается паШо, это означает, что следует исполь- 
зовать протокол передачи сообщений по электронной почте. 


СорВег — служба (а значит, и протокол), предназначенная, в первую очередь, для 
работы неграфических браузеров. Она предоставляет систему доступа к инфор- 
мации, основанную на меню. 


№\5 — служба обеспечения телеконференций; это система типа доски объявле- 
ний, на которую вы можете поместить свое сообщение и на которой можно про- 
читать то, что там разместили другие участники телеконференции. 


Ниже приведены примеры ссылок с применением Ч ВГ-адресов: 

<А НВЕЕ="Нр: //Нр.ааттга{.ги/РУВ/таех. Шт" >Бесплатный доступ</А> 

<А НВЕЕ="таЩо:аипаеу@та!.аатига!.ги">Отправить почту</А> 
Пути поиска могут быть абсолютными и относительными. Абсолютный путь опи- 
сывает местоположение файла начиная с самого высокого уровня и включает 
имена всех каталогов, ведущих к файлу. Ошибка в записи абсолютного пути (ад- 
реса) файла приводит к тому, что файл не будет найден. Относительный путь 
(адрес) описывает местоположение файла относительно места расположения те- 
кущего документа. Так, если вы указываете просто имя файла туНе.пет, это оз- 
начает, что вы указываете относительный адрес. В данном случае браузер будет 
искать его в том же каталоге, где находится текущий документ. Если перед име- 
нем файла поставить ../ (например.. ./туе.В@т), то браузер будет искать файл в 
каталоге, находящемся на один уровень выше, чем тот, в котором находится теку- 
щий документ. Аналогично, если перед именем файла поставить ../../(например, 
../.. /тУЁНе.Вит), то браузер будет искать файл в каталоге на два уровня выше, чем 
текущий. 


При создании ссылок вы можете указывать не только на конкретные документы 
и программы (то есть конкретные файлы, используя путь к ним), но и на папки 
(каталоги). Другими словами, адрес — это описание места расположения ресурса 
(единицы хранения информации). Он может быть точным или «приблизитель- 
ным» (неполным). Вы можете ссылаться на папку, НТМГ-документ, документ, 
созданный каким-либо приложением (например, М$ \ога, М$ Ехсе!), или про- 
сто на текстовый файл с расширением .. Наконец, можно сослаться на файл 
программы с расширением .ехе. Однако в последнем случае (по крайней мере, 
в Пщегпе! Ехрогег) сработает защита вашего компьютера. Появится окно с пре- 
дупреждением и предложением возможных вариантов: запустить файл програм- 
мы или сохранить его на диске — способ защиты от потенциальных вирусов. В этом 
случае вы сами решаете, что делать. Можно сразу запустить файл программы, 
а можно сохранить его на локальном диске, проверить с помощью антивирусной 
программы и только потом запустить, вылечить или уничтожить. 


Ссылки в пределах одного документа 


Иногда оказывается полезным организовать ссылки на разделы одного и того же 
документа. Например, на своей странице вы размещаете статью объемом в несколь- 
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ко десятков страниц как единый НТМГ-документ. Скорее всего, вам захочется 
сделать ссылки на предыдущие или последующие разделы этого документа. Речь 
идет о ссылках не на другие НТМГ-документы, а на определенные места того же 
самого документа. Такие ссылки еще называют закладками. Для них необходимы 
две вещи: якорь и собственно ссылка. Якорь определяет место в документе, к ко- 
торому происходит переход по ссылке. Ссылка использует имя якоря вместо имени 
(адреса) файла. 


Формат якоря: 
<А ММЕ="имя якоря"> текст_на_экране</А> 


Формат ссылки: 
<А НКЕР"#имя_якоря"> текст _на_котором_щелкать</А> 


ШСсылки в пределах одного документа> - Мсгозой 1щегпе! Епр/ю!е! 
Файл Правка Вид Избранное! Сервис Справка 


5. . ) ‚3 7% 
т> = = №3. 


Назад ; Остановить Обновить Домой Поиск 


Нибранное Журнал _ — 8) 


Здесь используются текстовые ссылки наразделы в пределах одного и того же | 
документа. При щелчке по ссылке окно броузера будет прокручиваться до тех пор, пока | 
не появится соответствующий ссылке якорь. 


Содержание 


Гл ВЕ'!. Основы НТМЕ, й 
Глзва2. Примеры программ 


Глава!.Основы языка НТМГ, 


В этой главе МЫ собираемся рассмотреть основные элементы языка НТМЕ. Наязыке | 
НТМЕсоздаютсядокументы,которыемогутбытьопубликованыв Интернет. После 
изучения ОСНОВНЫХ конструкций языка МЫ подробно рассмотрим примеры программ | 
(см. главу 2) | 


| Глава 2.Примеры программ || 


Здесь МЫ рассмотрим примеры программ с использованием элементов языка, которым | 
посвящена Глава]... Прежде всего рассмотрим применение текстовых ссылок. ыы 
1 


| 3) Мой комльютея 


Рис. П1.15. Текстовые ссылки на разделы в пределах одного и того же документа 


В листинге П1.3. приводится программа, демонстрирующая применение ссылок 
в пределах одного документа и вид этого документа в окне браузера (рис. П1.15). 
Мы используем ссылки при создании оглавления документа, а также ссылки из 
текста одних глав на другие главы. 
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Листинг П1.3. Код программы, демонстрирующей применение ссылок в пределах одного 
документа 

<НТМЕ> 
<НЕАО><Т1Т1_Е>Ссылки в пределах одного документа</Т1Т1_Е></НЕАО> 
<ВООУ>Здесь используются текстовые ссылки на разделы в пределах одного и 
того же документа. При щелчке на ссылке окно браузера будет 
прокручиваться до тех пор, пока не появится соответствующий ссылке 
якорь. 
<Р> 
<Н2>Содержание</Н2> 
<р><р><А НЖЕР "#Глава1">Глава1. Основы НТМГ</А> 
<ВВ><А НКЕР="#Глава2">Глава2. Примеры программ</А> 
<р><р> 
<Н2><А МАМЕ = "Глава1">Глава1 ‚ </А>Основы языка НТМЕ</Н2>. 
В этой главе мы собираемся рассмотреть основные элементы языка НПМЕЬ На 
языке МС создаются документы, которые могут быть опубликованы в 
Интернете. После изучения основных конструкций языка мы подробно 


рассмотрим примеры программ КА НКЕР="#Глава2?">см. главу -2</А>) . 

<Р> 

<Н2><А МАМЕ="Глава2">Глава 2.</А>Примеры программ</Н2> 

Здесь мы рассмотрим примеры программ с использованием элементов языка, 
которым посвящена 

<А НВЕЕ="# [71!аВа|">гпаВа!.</А> 


Прежде всего рассмотрим применение текстовых ссылок. 
</ВОГ\У> 
<ИНТМЕ> 


Таблицы 


Довольно часто на веб-страницах встречаются таблицы. Простейший пример таб- 
личной организации данных— прайс-лист. Однако таблицы можно использовать 
просто как способ форматирования текста, поскольку таблица в НТМГ-докумен- 
те может не содержать всех или некоторых разграничительных линий (сетки). 
Заметим, что в большинстве случаев элементы текста позиционируются как таб- 
личные. 


Идея использования таблиц в качестве средства позиционирования проста. Вы 
мысленно разбиваете окно на ячейки (клетки) и решаете, какой элемент страни- 
цы в какую ячейку поместить, — это хороший способ избавиться от «естественно- 
гох расположения элементов друг за другом, которое осуществляет браузер по 
умолчанию. Далее будет рассмотрен более «свободный» способ позиционирова- 
ния элементов, позволяющий помещать элементы в любое место окна браузера. 
Он основан на каскадных таблицах стилей. Однако, как правило, на практике для 
позиционирования элементов вполне достаточно использовать простую схему 
таблицы. 


Таблица представляет собой особую часть НТМГ-документа. Данные в ней орга- 
низованы в виде прямоугольной сетки, которая состоит из вертикальных столб- 
цов (колонок) и горизонтальных рядов (строк). Каждая клетка таблицы называ- 
ется ячейкой. Ячейки могут содержать текст, грасрику и даже другую таблицу. 

Таблицы состоят из трех основных частей: названия таблицы, заголовков столб- 
цов и ячеек. Таблица заполняется слева направо, ячейка за ячейкой, начиная с ле- 
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вого верхнего угла и заканчивая правым нижним углом. Каждая ячейка должна 
быть заполнена (для создания пустых ячеек используются пробелы). 


Описание таблицы в НТМГ-документе начинается с тега <ТАВЕЕ> и заканчивает- 
ся тегом </ТАВИЕ>. Если вы хотите, чтобы таблица имела видимую рамку (грани- 
цы), используйте атрибут ВОКПЕК, например: 

<ТАВЬЕ ВОВРЕВ> 


Атрибут ВОВОЕВ может принимать аргумент (число), определяющий ширину рам- 
ки, например: 
<ТАВГЕ ВОВОЕВ=10> 


Для задания названия таблицы используется тег <САРПЮМ> с атрибутом выравни- 
вания АПОМ, который может принимать значение ТОР или ВОПОМ (расположение 
названия вверху или внизу таблицы соответственно), например: 

<САРТТОМ АГТСМ=ТОР> Моя таблица </САРТТОМ> 


Каждый ряд ячеек начинается с тега <ТВ> и заканчивается тегом </ТВ>. 
Если ряд должен содержать заголовки столбцов таблицы, то используются теги 


<ТН> и </ТН>. Если в ячейках должны размещаться данные, то используются теги 
<ГО»> и </ТБ»>. 


Теги заголовков и данныхдолжны располагаться между тегами рядов <ТВ> и </ТК>. 
Проще говоря, вы сначала определяете таблицу (тег <ТАВГЕЕ>), а затем внутри это- 
го определения задаете строки (тег <ТЁВ>) и содержимое ячеек (тег <ГО> — для дан- 
ных, тег<ТН> — для названий заголовков столбцов). 


Приведем пример описания простой таблицы, встроенной в некоторый текст. 
Обратите внимание на порядок заполнения ячеек таблицы. Сначала определяет - 
сЯ строка заголовков столбцов таблицы. Затем аналогичным образом создаются 
строки данных, при этом указывается, какие данные должны располагаться в ячей- 
ках таблицы. Строка заголовков столбцов задается так же, как и строка данных. 
Отличие лишь в том, что при создании строки заголовков внутри тега <ТК> ис- 
пользуется тег <ТН>, а при создании строки данных — тег <ТО>. 


<НТМЕ> 
<НЕАО><Т1Т1_Е>Таблицы</Т1Т1_Е></НЕАО> 
<вору> 

<Н2>Основные элементы таблиц</Н2> 
<Р> 


Ниже приведен пример простой таблицы (рис. П1.16). 


<Р> 

<ТАВГЕ ВОКОЕВ> 

<САРТТОМ АГТСМ=ТОР>СПЮНСОК сотрудников</САРТЮМ> 
<ТВ> 

<ТН>Имя</ТН><ТН>Должность< /ТН><ТН>Оклад</ТН> 
</тв> 

<ТВ> 

<ТО>МВан< /ТО><Тр>4преКТор< /ТО><ТрО>1000</тр> 
</тв> 

<ТВ> 

<ТЬ>пеТр</Тр><Тр>ВухкапТер< /ТО><ТрО>800</тТо> 
</ГВ> 

<ТВ> 
<ТО><РеНор</ТО><ТО>Рабо4МР</ТО><ТО>50</ТО> 
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<> 
</ТАВЕЕ> 
</вору> 
</ятмг> 


Обновить Обновить 


Основные элементы таблиц 


Ниже приведен пример простой таблицы 


Список сотрудников 


| Имя [Должность [Оклад 
Иван [Директор 1000 
[Петр [Бухгалтер [$60 


Федор рабочий 50 


# В Гогово 24 Мой компьютер 


Рис. П1.16. Пример простой таблицы 


Несколько ячеек можно объединить в одну как по горизонтали, так и по вертика- 
ли. Объединение по столбцу применяют в том случае, когда необходимо, чтобы 
соседние столбцы имели общий заголовок. Объединение по рядам делается тог- 
да, когда содержимое нескольких ячеек подряд одинаково. Для объединения яче- 
ек используются теги СОЗРАМ и ВОМБРАМ (по столбцам и по рядам соответствен- 
но). Аргументами этих атрибутов будет количество объединяемых столбцов или 
рядов. Вот пример объединения ячеек: 


<НТМЕ> 
<НЕАО><ТИТЬЕ>Табппи < /ИТЕЕ></НЕАО> 
<ВОБУ> 

<Н2>Основные элементы таблиц</Н2> 
«р» 


Ниже приведен пример простой таблицы с объединенными ячейками (рис. ПТ 1.17). 


<Р> 

<ТАВЕЕ ВОВОЕРО 

<САРПОМ А1ЛСМ=ТОР>Список сотрудников</САРТЮМ> 
<ТВ><ТН С015РАМ=2>ИМЯ И должность</ТН><ТН>Оклад</ТН> 
</ТВ> 

<ТА><ТО>МВан</ТО><ТО>4НректТОр</ТО><ТО0>1000</ТО> 
</ТВ> 

<ТВ><ТО>пеТр</ТО><ТО>ВухгапТер</ТО><Т0>800</ТО> 

</ТВ> 

<ТЯ><ТО>Федор</ТО><ТО — ВО\МЗРАМ=2>Рабо4й</ТО><ТО>50</ТО> 
</ТВ> 
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<ТВ><ТО>ВасппМУ</ТО><ТО>70</ТО> 
</тв> 

</ТАВЕЕ> 

</воБу> 

</НТМЕ> 


Щ Таблицы - Мсгозой тете! Ехрме» ЗЕ УЗО 
йн(. {ранка Вид Избранное Сервис Спре о] 


5 1 » 
ШФ- Е Остановить Обновит® 


Основные элементы таблиц 


Ниже приведен пример простой таблицы с 
объединенными ячейками 
Список сотрудников 


[Имя н должность Юклад 
рЭван [Директор 1000 


Петр {Бухгалтер 1800 
Федор . 450 


;.....т— [Рабочий /*._ 
Василий ! 


1] Петово {3} Мей компьютер 


Рис. П1.17. Пример простой таблицы с объединенными ячейками 


Можно управлять шириной как всей таблицы, так и каждой отдельной ячейки. 
Ширину всей таблицы можно задать как в пикселах, так и в процентах от ширины 
окна. Ширину ячеек можно задать также двумя способами: в пикселах и в про- 
центах от ширины таблицы. Следует иметь в виду, что ячейки в одном столбце 
имеют одинаковую ширину, аячейки одного ряда — разную ширину. Ширинатаб- 
лицы задается атрибутом УМОТН в теге <ТАВЙ Е>, ширина ячейки указывается тем 
же атрибутом в теге <ТН> или <ТО»>. 

<НТМЕ> 

<НЕАБ><ТТЬЕ>Табппи < /ИТЕЕ></НЕАО> 

<вору> 

<Н2>Основные элементы таблиц</Н2> 

<Р> 
Ниже приведен пример таблицы с объединенными ячейками и заданными разме- 
рами (рис. П1.18). 

<Р> 

<ТАВГЕ ВОВРЕВ УОТН=400> 

<САРТОМ А1ЛСЫ=ТОР>Список сотрудников</САРТЮМ> 

<тв> 


<ТН СОЁЗРАМ=2 ИЮТН=75%>Имя и должность</ТН> <ТН>Оклад</ТН> 
<> 
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<ТА> 
<ТО>МВаН</ТО><ТО>АМреКТор</ТО><ТО>1000</ТО> 
</ТВ> 

<ТВ> 

<ТЬ>Е1еТр</Тр><ТОо>ВухгапТер< /ТО><ТЬ>800</ТЬ> 
</ТВ> 

<ТВ> 

<ТО>Федор</ТО><ТО ВОМЗРАМ=2>Ра6о4М11</ТО><ТЬ>50</ТО> 
</ТВ> 

<ТВ> 

<ТО>ВаскмМ11</ТО><Тр>'70</Тр> 

</ТВ> 

</ТАВЬЕ> 

</ВорУ> 

</НТМЬ> 


«ЗЪ Таблицы - М!сгозой. егпе! Ехр/оге! 


3>аш Прлакя Вт Игранное Сервис Епр«ика о 


+= > ся | 


Над | бо _ Остановить Обнбтик — Домой 


Основные элементы таблиц 


Ниже приведен пример таблицы с объединенными ячейками 
и заданными размерами 


Список сотрудников 


Имя и должность | Оклад 
Иван Директор ПООО 
ретр [Бухгалтер 1800 
[Федор Г. 50 
Рабочий 
Василий | ВН 


#1] Готово 


Рис. П1.18. Пример таблицы с объединенными ячейками и заданными размерами 


ое 


Текст и графику внутри ячеек таблиц можно выравнивать. Горизонтальное и вер- 
тикальное выравнивание содержимого рядов задается с помощью атрибута АЧНОМ 
в теге <ТВ>. Выравнивание в отдельных ячейках выполняет атрибут АПОМ в тегах 
<ТН> и <ТЬ»>. Атрибут АЦОМ может принимать аргументы ГЕЕГ (по левому краю), 


КЮНГ (по правому краю) и СЕМГЕК (по центру). 
Примеры использования атрибута АНПОМ;: 


<ТВ АНСМ=ЬЕРТ» 
<тн МОТН=25% АНСМЕСЕМТЕА>НМН и должность</тн> 


Для определения дизайна рамок таблицы в браузере Пиегпе Ехр]огег можно ис- 
пользовать атрибут ЕКАМЕ тега <ТАВЕЕ>. Далее перечислены возможные аргумен- 


ты атрибута ЕКАМЕ указывающие способы изображения рамки: 
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. ВОХ—все четыре стороны рамки; 

. АВОМЕ — только верхняя часть рамки; 

. ВНОМ — только нижняя часть рамки; 

. НЯОЕ$ — горизонтальные части рамки сверху и снизу; 

. УЗОЕЗ — только левая и правая вертикальные части рамки; 
. 1Н$ — только левая часть рамки; 

. ВН5— только правая часть рамки; 

. \ЮШ — не изображать внешнюю рамку. 


Разделительные линии между столбцами и рядами таблицы описываются атри- 
бутом КОШ$ в теге <ТАВЕЕ>. Атрибут КИШ может принимать следующие значе- 
ния, задающие способ изображения разделительных линий: 


. АП, — все вертикальные и горизонтальныелинии; 


.  ВОМб — только горизонтальныелинии между рядами; 


т Таблицы - Мююзой И\егпее Ехрогег ^ тт у ТЕЗ 
Файл Правка Вид Избранное Сервис Спр »* 
$] э» 
Остановить Обновить 
: а ны =: == ды ными — 
Основные элементы таблиц | 
| Различный дизайн таблиц | 
й 
Список сотрудников | 
| 
Имя и должность Оклад } 
Иван Директор 1001 | 
Петр Бухгалтер 800 | 
Федор 0 
› Рабочий 
Р!Василий 0 | 
ПИ 
Список сотрудников || 
| | 
Имя и должность Оклад 
[Иван Директор 1000 
Петр Бухгалтер 800 
Федор Рабочий ы 
\ Василий [70 
= щ* 89 А 53 | = Льютер | 


Рис. П1.19. Пример различного дизайна таблиц 


Т а [6] л и Ц ы . 3 3 1 


. О95 — только вертикальные линии между столбцами; 
 Ю№ЮМЕ — не изображать разделительные линии. 


В листинге П1.4 приведен пример управления дизайном таблиц (рис. П1.19). 


Листинг П1.4. Пример управления дизайном таблиц, 


<НТМЕ> 

<НЕАО><Т1Т1_Е>Таблицы</ПИТЬЕ></НЕАО> 

<ВОГУ> 

<Н2>Основные элементы табпиц</Н2> 

<Р>Различный дизайн таблиц 

<Р> 

<ТАВГЕ- ВОКРЕВ=15 ЕКАМЕ=ВОХ ВОПЕ$=ВО\У$ УПОТН=300> 
<САРТТОМ АГТСМ=ТОР>СппсоК сотрудников</САРТЮМ> 
<ТВ> 

<ТН СОТЕ$5РАМ=2>ИМЯ И должность</ТН><ТН>Оклад</ТН> 
</ТК> 

<ТК> 

<ТО>МВан< /ТО><ТрО>АМрекКТор< /ТО><Тр>1000</тр> 
</тв> 

<ТВ> 

<ТО>пеТр</ТО><ТрЬ>ВухгапТер< /ТО><Тр>800</тТро> 
</тв> 

<ТВ> 

<ТО>Федор</ТО><ТО ВОМЗРАМ=2>Рабо4М</ТО><Тр>50</тТр> 
</тТвВ> 

<Тв> 

<ТО>ВасМиМИ</ТО><ТО>70</ТО> 

</ТК> 

</ТАВЕЕ> 

<ТАВГЕ ВОКОЕВ=10 ЕКАМЕ=ВОХ ВОГЕ$=СоТ$ УЛОТН=300> 


<САРТТОМ АГТСМ=ТОР>Сп11соК сотрудников</САРТЮМ> 
<ТВ> 

<ТН С01_5РАМ=2>Имя и должность</ТН><ТН>Оклад</ТН> 
</ТвВ> 

<ТВ> 
<ТО>Иван< /ТО><ТО>Директор< /ТО><Тр>1000</тТро> 
</ТВ> 

<Тв> 
<Тр>г1еТр</Тр><Тр>ВухгапТер< /Тр><Тр>800</тТр> 
</ТВ> 

<ТВ> 
<ТО>Федор</ТО><ТО ВОМЗРАМ = 2>Рабо4МИ< /ТО><Тр>50</Тр> 
</Тв> 

<ТВ> 

<ТР>ВаспппР1</ТО><ТО>'70</Тр> 

</ТВ> 

</ТАВЬЕ> 

</ВОрУ> 

</НтТмМЬ> 


В следующем примере используем таблицу без рамок для размещения различных 
элементов на странице. В ячейки помещены текстовые ссылки, изображения и чи- 
сло 1000, а некоторые ячейки остались пустыми (рис. П 1.20). Для задания нужного 
расстояния между элементами следует использовать атрибуты выравнивания. 
Пока еще нет другого способа разместить несколько элементов в одном ряду, кроме 
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7 Таблица - МсгозоН тете! Епроег о 9 

` фанл Правка Вид избранное Сервис’ бпрявка 7: : | 
вы 5 » 
, Вперед Остановить Обновить цомои 

НВ хе ел Е НЕЕ 


Использование таблицы как способа Ш 
расположения элементов на странице 


Пример 1 \ 1000 


Пример 2. Р- | 


| 


#] Готово 20] Мой когарьютер 


= 


Рис. П1.20. Использование таблицы для расположения элементов на странице 


использования таблиц. В следующем разделе, посвященном каскадным таблицам 
стилей, будет рассмотрен другой способ позиционирования элементов. В приве- 
денном ниже примере просто задана таблица, но не указаны ее размеры и способ 
выравнивания для того, чтобы показать: можно располагать элементы как по го- 
ризонтали, так и по вертикали в пределах некоторой области. При этом только 
опытный программист на языке НТМЕ, может догадаться по внешнему виду стра- 
ницы, что для ее создания была использована таблица. Освойте этот прием позици- 
онирования, если хотите располагать на веб-странице много графических элемен- 
тов и ссылок. Это позволит сэкономить место и достаточно эффектно разместить 
материал в окне браузера. 


<НТМГ> 

<НЕАО><Т1Т1Е>Таблица< /Т1ТЛЕ ><НЕАО> 

<вору> 

<Н2> 

Использование таблицы как способа расположения элементов на странице 
</Н2> 

<ТАВЬЕ> 

<ТВ> 

<ТО><А НВЕЕ = "приМер1.Ь1т">Пример 1</А></ТО> 

<ТО><ТМАСЕ $ВС="1090%1р.91ЁЕ" ИтТОТН=100 НЕТСНТ=100></Тр> 
<Тр>1000</тро> 

</ТВ> 

<ТВ> 

<Тр><А НВЕЕ="приМер2 .ВЕш">прНМер 2‹/А>‹/тр> 

<ТО><ТМАСЕ 5ВС="квадрат.Ь5тр"></ТО> 

</ТВ> 
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</ТАВЬЕ> 

</ВОБ\> 

</НТМЕ> 
Цветовое оформление таблиц производится с помощью атрибута ВОСООВ, кото- 
рый принимает в качестве аргумента цвет в виде имени или шестнадцатеричного 
числа. Если нужно установить цвет для всей таблицы, то атрибут ВЗСООК встав- 
ляется в тег <ГАВЕЕ>. Для изменения цвета только одного ряда этот атрибут встав- 
ляется в тег <ТК>. Задание цвета отдельной ячейки обеспечивается атрибутом 
ВОСОГОВ внутри тега <ТО»>. 


Если в таблице имеются рамки, то можно указать и их цвет с помощью атрибутов: 
 _ ВОКОЕВООГОВ - цвет всей рамки; 
 _ ВОВРЕВООШОВИСНГТ - цвет светлой части рамки; 
 _ ВОВОЕКООГОВРАКК - цвет темной части рамки. 


Эти атрибуты вставляются в тег <ТАВГЕ>. Чтобы они действительно работали, не- 
обходимо наличие еще и атрибута ВОВПГЕК, задающего ширину рамки. Ниже при- 
водится пример использования атрибута цвета в различных тегах таблицы: 

<ТАВЕ ВбСОГОВ="#РОРОЁРО" ВОВОЕВ=10 ВОВОЕВСО!ГОВ="#808080" 

ВОВОЕВСОГОВИСНТ="#707070" ВОРОЕВСОГОВОАВК="#202020"> 

<ТВ В@СООВ="ВЬЕ"> 

<ТН>Имя</ТН><ТН>Адрес</ТН> 

</тв> 

<тв> 

<То ВССОГОВ="УЕШТОМ" >МВаН< /ТО><ТО>г.Санкт-Петербург</Т0> 

</ТВ> 

</ТАВЬЕ> 
Задать шрифт для текстов внутри ячеек таблицы можно с помощью тегов заго- 
ловков и физических стилей внутри тегов <ТО>: 


<То ВОСОЕОВ=“"УЕНОМ/"><Н2>МВан</Н2></ТО> 


Теперь вы имеете общее представление о том, зачем нужны таблицы и как их со- 
здавать. Заметим, что таблицы удобно готовить в таких редакторах, как Его {Разе 
и Огеашуеауег. С их помощью визуальными средствами можно начертить табли- 
цу и вставить в ее ячейки необходимые данные. Для этих операций редактор 
Огеаш\меауег даже удобнее, чем Егоп(Раве. 


Стили 


Существует еще один прием позиционирования элементов для достижения визу- 
альных эффектов, которые могут украсить страницу и привлечь к ней внимание. 
Этот прием основан на определении пользовательских стилей и задании таблицы 
стилей. Таблица стилей — это просто некоторая структура описания свойств эле- 
мента. Не ищите здесь прямоугольной сетки. Если таблица стилей задана, то раз- 
личные документы могут просто ссылаться на эту таблицу и не содержать большое 
количество атрибутов в тегах форматирования типа <Н]>, <БАСЕ> ит. п. Таблицы 
стилей (так называемые Сазса@тя 5Уе ЗВееё$ — С$5$) содержат описание фор- 
мата части или всего текста, координаты расположения элементов и другие пара- 
метры. Задание стиля обеспечивается с помощью и тега <ЗГИЕ>, и атрибута 5 МЕ. 


334 Приложение 1. Руководство по динамическому НТМЕ 


Используя стили, можно позиционировать элементы страницы (например, тек- 
сты и графику), указав координаты их положения. И это, пожалуй, самое важное, 
что дают стили. Кроме того, таблицы стилей часто применяются при создании 
динамических страниц. 


С этого момента способ изложения материала несколько изменится. Теперь мы 
больше будем рассказывать об идеях, иллюстрируя их примерами, и меньше уде- 
лять внимание полноте определений. При этом все примеры программ будут, как 
и прежде, работоспособными. Даже если вы не до конца поймете теоретический 
материал, вы все равно можете использовать приведенные ниже примеры в своих 
разработках. Для этого следует просто скопировать тексты или отдельные их фраг- 
менты в ваш собственный НТМТ-документ и адаптировать к своей конкретной 
задаче путем коррекции отдельных параметров. 


Теги <$[МЕ> и <5ГИЕ> используются внутри тегов заголовка файла <НЕАО> 
и </НЕАО», а атрибут $ МЕ — в теге заголовка раздела (<Н1>, <Н2»....,<Н6>), а так- 
же в теге <ВОБУ>, в теге выделения фрагмента <П/М\> и многих других. 


Применение тега <ЗТУГЕ>: 


<НЕАО> 

<ЭМЕ> 

Тег {свойство!: значение! ; свойство2: значение2,..., свойством: 

значением } 

</5М Е> 

</НЕАО> 
Здесь в фигурных скобках через точку с запятой перечисляются свойства и их 
значения, причем между свойством и его значением ставится двоеточие. При этом 
тег, указываемый перед описанием в фигурных скобках, пишется без угловых 
скобок. 


В следующем примере определяются стили заголовков первого и второго уров- 
ней путем использования тега ЗЕ 


<НТМЬ> 

<НЕАО> 

<ЗТУШЕ> 

НГ {Еопё-812е:48рЕ;Со1ог:ВЕШ} 

#2 {Еопё-812е:20ре;Со1ог:ВЬОЕ} 
</5ТУБЕ> 

</НЕАО> 

<ВОПУ> 

<Н1>Это стиль НТ. Цвет - красный</Н1> 
<Р> 

<Н2>Это стиль Н2. Цвет - синий</Н2> 
<Р> 

Это - обычный стиль по умолчанию 
</воБу> 

</НТМЕ> 


Мы изменили стили НГи Н2, принятые по умолчанию: назначили размеры 
(48 и 30 точек) и цвета (красный и синий) для всех текстов, которые окажутся 


внутри этих тегов. Существуют и другие свойства. Например, свойство НОМГ 
РАМГУ\ НЕХЕПСА задает гарнитуру шрифта Н_ХЕПСА. 


Обратите внимание на то, что внутри тега <МЕ> указываются определения сти- 
лей тегов, которые записываются без угловых скобок. 
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Можно определить стиль для тега ВОБУ. Тогда весь текст, находящийся между те- 
гами <ВОБУ> и </ВОБУ>, будет автоматически отформатирован в соответствии 
с перечисленными свойствами. 


Если мы хотим задать один и тот же стиль сразу для нескольких тегов, то перед 
определением стиля (всего, что заключено в фигурные скобки) можно указать 
перечень тегов (без угловых скобок), разделенных запятыми. В следующем при- 
мере задается одинаковый стиль для заголовков первого и второго уровней: 


<НТМЕ> 

<НЕАБ> 

<ЭТУЕЕ> 

Н!, Н2 {{оп+-$12е:48р{; со\ог: ВЕ} 
</ЗТУГЕ> 

</НЕАБ> 

<вору> 

<Н1>Это стиль Н.. Цвет - красный</Н1> 
<Р> 

<Н2>Это стиль Н2, такой же, что и НТ. Цвет - красный</Н2> 
ры 

Это - обычный стиль по умолчанию 
</ВОПУ> 

</НТМЬ> 


й = -> 


Назад | Осганояшь Обновит, Домой Поиск 


Пример каскадного стиля 


п 


всякой гГиИки 


| 
| 
используя только стили текста | 


42] Готова 1.84 Мой ко 


АОИ | 


Рис. П1.21. Пример каскадного стиля 
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Мы можем создать таблицы стилей, закрепив за ними имя. Это имя задается как 
обычное имя, но с точкой в качестве первого символа. Тогда в тегах мы можем 
обращаться к этой таблице по ее имени, используя атрибут С! А5$=имя стиля,, где 
имя стиля употребляется уже без точки. 


Например, мы можем задать стиль так: 


<ЗТУБЕ> 
пузеу1е {со1ог:Ь1асКкК; ЕопЕ-Еам11у: Аг1а1 } 
</5ТУБЕ> 


А стиль заголовка второго уровня можно задать где-нибудь в тексте программы 
таким образом: 
<Н2? С1А$$=шузеу1е> 


Рассмотрим пример (листинг П 1.5), создающий эффект, которого без задания сти- 
ля можно было бы достичь только с помощью графики (рис. П1.21). Мы наклады- 
ваем тексты друг на друга. Эта возможность далее будет использована для создания 
эффекта выпуклого текста (так называемого $О-эффекта). Кроме того, возмож- 
ность наложения (частичного перекрытия) фрагментов страницы часто исполь- 
зуется в дизайне реальных страниц. В данном примере применяется тег <ОТУ> для 
выделения фрагмента НТМТ-документа. Обратите внимание, как внутри опре- 
деления стиля тега ВОБУ определяются другие стили: с именами тень, основа, слой! 


и слой2. Это и есть каскадные таблицы стилей. 


Листинг П1.5. Создание каскадного стиля 


<НТМЬ 
<НЕАО> 
<ТИ1Е>Пример С$$5</ПТЕЕ> 

<ТШЕ> 

ВОрУ {с01ог: Ю1аск; Е0п-812е:16рх; ЕопЕ-ЁЕам11у: Аг1а1} 

‚тень {со1ог: #0ВОВОВ; бехЕ-а1191:г1986; ие19Не: пед1им; махд1и-бор: 
3З0рх; Е0п&-812е:270рх;11пе-ВезчЬе: 270рх; 

Гопе-ЁЕам11у: Т1щез} 

‚основа {со1ог: гей; мезове: 900; магдлп-бор: -230рх; ЕопЕ-в12е:220рх: 
11пе-пе191е: 250рх; Еопе-ЁРам11у: Т1мез} 

.слой! {со1ог: Б]1аск; шаго1п-бор: -130рх; ме1чие: меди; опЕ-812е:65рх; 
11пе-Безтаве: 65рх; Ропе-ЁРаш11у: Ах1а1} 

.слой2 {со1ог: дгееп; пагд1п-бор: 30рх; мелаНе: шей1ит; ЕопЕ-в17е: З5рх; 
11пе-Бетаье: 45рх; Еопё-Ёат11у: Аг1а1} 

</5ТУЬЕ> 

</НВАО> 

<ВОрУ> 

Пример каскадного стиля 

<СЕМТЕК> 

<ТАВЕЕ \МЛОТН=500 СЕШРАПМС=0 СЕЧ$ЗРАСМС=0 ВОВОЕВЕО> 

<Тв> 

<ТЬ АБТСМ=СЕМТЕК УАШТСМ=ТОР> 

<РТУ СА$$=Тень>МЬ1 < /рту> 

<РТУ СЬА$$=осНОВа>МЬ1 < /ОТУ> 

<ОРТУ С1А55=слой1>сделали это без всякой графики</01У> 

<ОТУ С1_А55=слой2>используя только стили текста</01У> 

</ТО></ТВ> 

</ТАВЬЕ> 

</СЕМТЕВ> 
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</Вог\> 
</нтме> 


В приведенном выше примере использованы тег <ГЛУ\У> и атрибут СТА$. 


Тег <ОГУ> применяется для задания части страницы (фрагмента документа). Он 
ничего не форматирует, алишь помечает фрагмент текста, который рассматрива- 
ется как единый объект. Атрибут ЦА позволяет сослаться на таблицу стилей 
и тем самым задать стиль представления текста, расположенного между тегами 
<ОМ СТА$$.. .> и </0М>. Обратите внимание на то, как в таблице стилей определя- 
ется стиль: набору свойств в фигурных скобках присваивается имя, перед кото- 
рым ставится точка. В дальнейшем идут ссылки на эти имена с помощью атрибута 
СТА для применения ранее определенного стиля. Идея проста: сначала опреде- 
ляется что-то, а затем используется это определение путем ссылки на него. 


В этом примере тексты определяются как бы в слоях, которые накладываются 
друг на друга. Так, сначала выводится слой тень, затем на него накладывается слой 
основа, апотом — слой! ислой2. Очередность, в которой слои накладываются друг 
на друга, задает порядок следования фрагментов текста, помеченных тегом <ОТУ>. 
Собственно перекрытие слоев обеспечивается применением отрицательных зна- 
чений свойства таге1п-1ор (отступ сверху). 


В рассмотренном выше примере были использованы следующие свойства: 
. шШагош-р — отступ сверху; 

. с0]ог — цвет; 

. ЮщЩ-$12е — размер шрифта; 

. Ю-РмшЦу — семейство шрифтов; 

. уе — степень жирности шрифта; 
[* Пле-Ве12Ъе — высота строки. 


Используя отрицательные значения свойства тагет-{щор, можно наложить один 
текст на другой. 
Кроме рассмотренных выше способов задания стилей можно применять атрибут 
УГИЕ вставляемый в теги заголовков, абзаца <Р>, тела<ВООУ>, <ГЛУ> и МС>. В этом 
случае стиль задается в следующем формате: 
5ТУ1Е="описание_свойств_стиля" 

Описание свойств стиля заключается в кавычки и содержит свойства и их значе- 
ния, перечисленные через точку с запятой, как это делалось при использовании 
тега <ЗЭТУШЕ>. 
Атрибут [МЕ обычно применяется в тех случаях, когда необходимо задать стиль 
элемента по месту его появления в программе. Вот пример использования атри- 
бута УМЕ для форматирования заголовка второго уровня: 

- <Н2 ЭТУЕЕ="оп{-317е:48: Топ{-ТатПу:Апа1"> Некоторый текст</Н2> 


Позиционирование элементов 


Выше мы говорили о том, что позиционировать элементы страницы можно и пу- 
тем использования таблиц. Но это же можно делать и с помощью стилей. Среди 
параметров стиля имеются специальные свойства для позиционирования: 
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. ей — для задания расстояния в пикселах от левого края окна(х-координата); 


{ор — для задания расстояния в пикселах от верхнего края окна (у-коорди- 
ната); 


. 7-Ш0ех — для указания порядка, в котором элементы будуг перекрывать друг 
друга; это новое измерение, элементы с большим 7-индексом будут появлять- 
ся над элементами с меньшим 7-индексом. 


Конечно, при использовании этих трех свойств не создается эффекта трехмерно- 
го пространства, но это уже нечто большее, чем двухмерная плоскость. В этом 
случае говорят о 2,5-мерном пространстве. 


Кроме свойств-координат нам понадобится свойство ро$@оп, которое в сочета- 
нии со свойствами 1еЁ и {юр позволяет устанавливать элементы в определенные 
позиции окна. Свойство ро! оп может принимать три значения. 


.  а6зопие — заданные свойства 1 и {ор устанавливают элемент в место с коор- 
динатами х и у относительно верхнего левого угла контейнера (объекта, содер- 
жащего данный элемент). Если они определены для элемента вне контейнера, 
то началом отсчета координат будет верхний левый угол страницы. Заметим, 
что положение элемента не зависит от положения его тега внутри НТМГ-до- 
кумента. 


.  Г@аНуе — элемент будет установлен в соответствии с тем, в каком месте исход- 
ного текста он находится; это значение установлено по умолчанию. Например, 
если элемент находится в трех строках от начала его выделения в тексте доку- 
мента, то по умолчанию считается, что свойство позиционирования имеет зна- 
чение ге]аНуе, а свойства координат [ей и {ор — нулевые значения. Ненулевые 
значения свойств [ей и юр сдвигают элемент относительно исходного поло- 
жения. 


. ЗаНс — элемент устанавливается в фиксированное положение относительно 
фона и не будет перемещаться при прокручивании страницы. 


Следующий пример показывает использование свойства 7-шаех. Хотя в тексте 
программы изображение описано выше остальных элементов, за счет присвоения ей 
индекса с большим номером она перемещается поверх первого текста (рис. П1.22). 
Таким образом, использование свойства 7-ш4ех освобождает от естественного 
порядка упоминания элементов в тексте НТМГ-программы. 

^р я 

<НЕАО><Т1Т1Е>Позиционирование</ТТТГ,></НЕАО> 

<ВОрУ ВССОГОВ="АОЦА" > 

<ОТУ СТУБЕ="ро$16 з| Ти{ фор: 9;1етт: 70; мтатн : 50; Петёит : 199 

1паех :2"> 

<1Мб 5ВС="109061р.91Ё"> 


<ОМ $ТМЕ = "розИ!оп:абзо!\е; +ор:101е4+:15; маи; 400; негав+:100"> 
| 51 со1ог : гей">Первый позиционированный текст, который 
накладывается на рисунок и на второй текст</Н1> 


<Г\ ЗТУЕЕ=" ро$ {1от: абзо! ие; тор: бо; 1ет+: з00;мтати: 50; пеганЕ: 100"> 
<Н! $ТУПЕ="союг : Ыие">Второй позиционированный текст</Н1> 

</ВОБУ> 

</ИТМ> 
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А Михозой тибеглей Ехо» 


Пер ан ты 
поз! ВЕ въ убИ 


коты "ЗАЛ бЗИЙонированный 


рис! И рой декст 


ма Мейкомоыютер 17” х еду 
Рис. П1.22. Пример позиционирования элементов 


При позиционировании элементов может оказаться, что размеры элемента пре- 
вышают размеры фрагмента (отводимой области, заданной в нашем примере тегом 
<ОТУ>). Например, текст или изображение не помещаются полностью в выделен- 
ный для них прямоугольник. На этот случай имеется свойство оуетНо\ (перепол- 
нение). 


Свойство оуегЙо\ может иметь три значения: 


. попе (ничего) — если элемент и выйдет за пределы фрагмента (отведенного 
для него места), он все равно будет показан; 


. СПр — выступающие за границы фрагмента части элемента будут обрезаны; 
. 5сго| — будет использована прокрутка. 


В следующем примере используется свойство оуегЙо\ для создания механизма 
прокрутки первого текста (рис. П1.23): 


<НТМЕ> 

<НЕАО><Т1Т1Е>Позиционирование</Т1Т1_Е></НЕАО> 

<ВОрУ ВССОШОВ="АОПЦА" > 

<РТУ 5ТУЕ="роз1 10: абзо1 бе; 6ор:0;1е6 6:70; мтаЕВ: 50; елавё:100"> 
<1МС 5ВС="109061р.91Е"> 

</01\> 

<ОМ — ЭТУЕЕ="розШопт:абзо!ще; 

{ор:10;1е{:15 ;ум!а{т:220; печнт: 120; омегНом: $сго!" > 

<Н1 ЗМЕ="Ссо|ог: гес!">Первый позиционированный текст, который 
накладывается на рисунок и на второй текст</Н1> 

</01\> 

<ГМ ЗТУЕЕ=" роз! оп: абзо|и{е; фор: 60; 1е1{: 300; мтатн: 50; не!ант: 100" > 
<Н1 ЭТМЕ="союг:Ыие">Второй позиционированный текст</Н1> 

</01\> 

</ВОГ\У> 

</НТМЕ> 
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Файл Правка- Вид Избранное- С^Р виз Справка : : | = | 

ву Эа ам Шо “Арес № | ^Ябреход-..:| 
ва сч ЕСС г} =} 
ы 
Второй 
позиционированный 
текст | 
| | 
| | 
| | 

аа ы 
Готово {2 Мой компьютер я 


Рис. `'П1.23. Использование свойства оме Яо\ для создания механизма прокрутки 


Понятно, что все рассмотренные выше страницы-уродцы создавались лишь с од- 
ной целью — продемонстрировать возможности языка, предоставляемые для по- 
зиционирования элементов, а не показать, что можно делать красивые вещи. Вы сами 
должны решить, какие средства и с какой целью использовать на своей веб-странице. 


Статические фильтры 


Фильтры — это эффекты изменения внешнего вида графики и текста на страни- 
це. С помощью фильтров вы можете отражать тексты и графику, создавать эф- 
фект движения, как это делается в графических редакторах. Другими словами, 
фильтр — это трансформация исходного изображения по определенным прави- 
лам (алгоритмам). Существуют статические и динамические фильтры. Статиче- 
ские фильтры изменяют внешний вид элемента, оставляя его неподвижным. 
Динамические фильтры позволяют трансформировать графический элемент со 
скоростью, задаваемой пользователем. 


Сначала рассмотрим статические фильтры. Статический фильтр можно задать 
как свойство в таблице стилей, используя запись вида: 

ИЦег: — название фильтра 
или, при наличии параметров, такую запись: 

ИЦег: ‘название фильтра(параметр!параметр2 ‚ параметрм) 


В языке НТМЕГ (версии 4) имеется 14 статических фильтров. Перечислим те из 
них, которые используются без параметров и чаще других: 


. Ыиг — создает эффект движения объекта; 


. Ярн — отражает объект симметрично относительно центральной горизонталь- 
ной оси; 
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* Шру — отражает объект симметричноотносительно центральной вертикальной оси; 


. \уауе — выполняет синусоидальное преобразование объекта вдоль вертикаль- 
ной оси; 


’ Ху — изменяет глубину цвета объекта и отрисовывает черно-белым, делая его 
похожим на рентгеновский снимок («рентгеновское изображение»). 


Ниже приводится код программы, которая выводит графический файл и текст 
сначала без фильтра, а затем с фильтрами Иру, И!рВ и Шаг. Результат работы этой 
программы показан на рис. П1.24. Фильтр Яру позволяет получить вертикальное 
отражение изображения и текста, фильтр рп — горизонтальное отражение, 
а фильтр Маг — размытие. Обратите внимание, что фильтр Баг, примененный 
к тексту, создает эффект трехмерности, то есть текст как бы отбрасывает тень. 


Ш Фильтры - Мисгозой ИмегпеЕ Ехрогег 


Файп Ораика Лад Избранное 5$р№с {правка 


ти аа" 9 : 


пин Остановить Обновить Домой Журнал 


Фильтр 
фыирхЬ 1! ух 
Цай дтагиФ 


г 


8) Мой номпьстер 


ы 


Рис. П1.24. Применение фильтров Яру, рп и Шиг 


<НТНЕ> 

<НЕАО><Т1Т1_Е>Фильтры< /ТИТЕЕ ></ НЕАО> 

<5ТУГЕ> 

Р {роз1лЕетоп : абзо1исе; бор: 0;1еЕ6: 190; ЕопЕ-512е:80} 
</5ТУБЕ> 


<ВОПУ> 
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<1Мб УТУБЕ="роз1 6101: абзо1а5е; и1 ай: 150; Ве1айе:100" 5ВС="мог19.91Е"> 
МС 
ТУБЕ="роз1 101: абзо1 ие; ор:120;1еЕ6:10;и1 961 :150;Везаве:100; Е1 16 ег: Е11ру" 
ВС="иог1 9.91 "> 

ре 
ТУБЕ= "роз 101: абзо1а6е; Еор:230;1еЕЕ: 10; мита: 150; пе190е:100;Е11сех:Е110№" 
ВС="мог1 а. 91 ЕЁ "> 

МС 
ТУБЕ= "ро$1 101: абзо1иее; сор: 340; 1еЕ6:10; м1: 150; пелаье: 100; 11 бег: 1х" 
ВС= "мог1. 91 "> 

<Р>Фильтр</Р> 

<Р 'ЗТУЕЕ="1ор: 130; +11ег:{Пру"> Фильтр Иру</Р> 

<Р °ТУЕЕ="{0ор:240; НКег: Нери" >0МпЬТр 1рп</Р> 

<Р ЗТУГЕ="Чор: З60;111ег:Ыиг" > Фильтр Б!иг</Р> 

</ВОБУ> 

</НТМЕ> 


Покажем работу еще двух фильтров: Хгау и \У\е (рис. П1.25). 


ялюоюлюфол 


льтры - Мюхозой имегпе Епр/ое! 
Е Файл Правка. ‚Вид. Избранное ` Сервис. Справка 


Е 8 Я - 


* ОсиИсать `Опн-. ПАР _ Ломом' | _Поиск 3 ый 


7 ПаЙдой компьютер. 


Рис. П1.25. Фильтры Хгау и мауе не воздействуют на тексты 


<НТМЬ> 

<НЕАО><Т1Т1Е>Фильтры< /ТТТЬЕ></НЕАО> 

<БТУБЕ> 

р {роз1Е1оп:арзо1а бе; Еор:0;1еЕе:190; ЕопЕ-в12е:48} 

</УТУБЕ> 

<ВОрУ> 

(М6 ЭТУГЕЯ"ро$1 11 оп; аБзо1аее;изаВ:150;Везойе: 100" $ВС="мох1а.9И" > 
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Мб 

ТУ 20511101: абзо| ие; Гор: 120 ;1еЁЕ: 10 ;*-14®: 150 ; ВезейЕ: 100; 1 |Еег :Хгау" 
5ВС= "мог 4.211" > 
<1Мб 


5ТУГЕ="ро$1 1оп:аббо| ие; фор: 230; 1еЁЕ: 10; м1 4 ЕВ: 150; ВетзНЕ: 100; Ги сег: \ауе" 
5ВС= "мог! 4.211 "> 

<Р>Фильтр</Р> 

<Р ЭТУГЕ="0р:130;Иег:Хгау">Фипьтр Хгау</Р> 

<Р 5ТУГЕ="0ор:240 {Н\ег:УУауе">ОппТрУ/ауе</Р> 

</ВОБУ> 

</НТМГ> 


Динамические фильтры 


Эффекты постепенного появления (исчезновения) графического изображения 
и преобразования одного изображения в другое можно получить с помощью сов- 
местного применения динамического фильтра и сценария. Разумное использова- 
ние таких эффектов украшает веб-страницу. Существует несколько способов пре- 
образований. Эти способы заранее определены, поэтому от вас требуется лишь 
указать номер выбранного способа. 


В табл. П1.4 приведены названия и номера превращений. 


"Таблиг ия НЕ4. Типьг воздействия фильтров`И`их мера, ее ый 


вращения 
Стягивающийся прямоугольник [е) 
Расширяющийся прямоугольник 1 
Стягивающийся круг 2 
Расширяющийся круг 3 
Стирание вверх 4 
Стирание вниз 5 
Стирание вправо б 
Стирание влево 7 
Вертикальные жалюзи 8 
Горизонтальные жалюзи 9 
Сужающиеся клетки 10 
Закрывающаяся шахматная доска 11 
Случайный наплыв 12 
Вертикальное деление внутрь 13 
Вертикальное деление наружу 14 
Горизонтальное деление внутрь 15 
Горизонтальное деление наружу 16 
Стирание влево-вниз 17 
Стирание влево-вверх 18 


Стирание вправо-вниз 19 
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Таблица П1.4 (продолжение) 


Тип превращения Номер фильтра 
Стирание вправо-вверх 20 
Случайные горизонтальные полосы 21 
Случайные вертикальные полосы 22 
Случайный выбор номера (из 0-22) 23 


В следующем примере рисунок с изображением карты мира постепенно стано- 
вится видимым через открывающиеся вертикальные жалюзи (рис. П1.26). Изо- 
бражение из файла мог@.=Шсначала невидимо (свойство у1$16Пйу:144еп таблицы 
стилей). В теге <ОТУ> применен динамический фильтр геуеа(гап$, управляющий 
появлением изображений. Сценарий содержит одну функцию 4уп_ИЦег(), кото- 
рая применяет фильтр (метод арр!уО), делает объект видимым (свойству у156ПИу 
присваивается значение "у1516[е"), устанавливает тип преобразования (Тгапз1ю0п=8) 
и задает длительность преобразования 2 с (метод р!ауО, которому передан число- 
вой параметр 2). Далее определено, что эффект постепенного появления картин- 
ки начнется сразу же после загрузки страницы. Это достигается привязкой функ- 
ции ауп_ЯЦег() к событию ОМГОАО в теге <ВОБУ>. 


«Динамический Фильтр" Мемзой: МетпеЕхрммм РЕЗ 
Файл Правка Вцд Иэвраннов Сервис Спра = | 


> 


Остановить Обновить 


} у || 


Динамическое преобразование картинки 
с помощью фильтра 


#5} Готово 3] Ной кочьктер 


Рис. П1.26. Динамическое преобразование картинки с помощью фильтра 
«вертикальные жалюзи» 


«НМ > 

<НЕАО> <ТТТЬЕ> Динамический фильтр </ТТТЬЕ> 
<ЭСВТРТ > 

ЕапсЕ1оп Чуп_Е11бех() 


Г 
\ 


Стили _345 


1таде!.1{ег$(О) .арр!у() 

И. зту[е. м5 16 ИЦу= "м1 1е" 

| таде!.1{ег$(О).Тгап$ Шот=8 
| паде!. 1 {ег$(О).р!ау(2) 


} 
</ЗСВТРТ> 
</НЕАР> 
<ВОБИОМЕОАО="ауп_Ниег()"> 
<ОМ 1Ю=|таде! ЗТУЕЕ="ро$юоп:аб5о1ще; 
пе!9п{: 200; м! а{1:300;1е#:10;1ор:10; ег: гемеа Игапт$" > 
<Ма@ 10=1 ЗЭТУЕ="роз! оп : абзо|и{е; 
Ве!91{:200;м1а{в:300 ; м$16ИКу: адепт" $АС=\мог!а.9> 
</ОТ\> 

<НЗ ЭТУЕЕ="ро$ оп: аб зо ще; +ор:210"> 

Динамическое преобразование картинки с помошью фильтра 

</Нз> 

<ЛВоБУ> 

. «АТМ 

Заметим, что Птпазе| — это имя (идентификатор) элемента-контейнера, заданно- 
го тегом <ОТУ>. Контейнер содержит единственный элемент (изображение), номы 
использовали его только затем, чтобы применить к нему метод арр!ау(), который 
не поддерживается элементом, созданным тегом <1М@О>. ЕщЩегз — коллекция всех 
фильтров. Фильтр (единственный) указан номером в коллекции: Ппазе].Йегз(О). 
Если в приведенной выше программе изменить тип преобразования, например, 
на 3 (расширяющийся круг) путем замены в теле функции соответствующей за- 
писи [тазе1.НЦегз(0).Тгапюп=3,то получится эффект, показанный на рис. П1.27 


(изображение постепенно появляется в расширяющемся круге). 


у 


«1 Динамический Фильтр - Метозой мете Вф Шиш 
Файл Правка 'Выа Иабранное Сервис Сир” 


Остановить Обновить 


к, | 
«8 \ | 


Динамическое преобразование кар’тинки 
с помощью фильтра 


к | 
3} ГГотово о! Мой компьютер 
мч — ный 


Рис. П1.27. Динамическое преобразование изображения с помощью фильтра 
«Расширяющийся круг» 
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При установке фильтра типа 12 возникает эффект постепенного повышения раз- 
решения изображения путем случайного заполнения пикселами места, отведен- 
ного под рисунок. Точки изображения постепенно выводятся на экран в случай- 
ном порядке. 


Тип преобразования 23 — случайный выбор и применение одного из имеющихся 
типов (от 0 до 22). Заранее вы не сможете угадать, какой именно фильтр сработа- 
ет, когда пользователь загрузит вашу страницу. 


Следующая программа аналогична рассмотренной выше, но в ней применяется 
другой фильтр (еп тап$), который создает эффект постепенного повышения 
яркости и насыщенности изображения. Этот фильтр имеет только один параметр - 
продолжительность преобразования (4игайоп). Обратите внимание, что новая 
программа получилась из предыдущей путем замены двух строк. 


<НТМЕ> 
<НЕАО> <ТИТЕ> Динамический фильтр </ТТЕЕ> 
<5СВРТ > 


ТипсНоп ауп 11! Цег() 


{ 

Тпаде1.Е1 16ехз(0).Аррту () 
ТТ.зсу1е.\у1$101116у="\у1з151е" 

Тмаде1. Е1Теехтз$ (0) .р1ау (2) 

} 

</5СВТРТ> 

</НЕАО> 

<ВОБУ ОМГОАБ=" ауп_Е116ех()"> 

<РТУ ТО=Тпаде1 УТУГЕ="ро$1Е1оп : абзо1абе; 

фе1ове: 200; мтаЕь:300;1еЕЕ :10;Еор:10; Еттеех :Б1епаЕхапз" > 
<1МС ТШ=ТТ СТУБЕ="ро$1Е1оп:абзо1асе; 

фелаьеЕ: 200; мтаев: 300;\1$16111 $у :619а4еп" 5ВС=мокТа. а91Е> 


< ЗТУЕЕ="ро$Моп:аб ое; {ор:210"> 

Динамическое преобразование картинки с помошью фильтра 

</НЗ> 

</ворУ> 

</НТМЕ> 
Попробуйте применить фильтр геуеаЙгапз, управляющий появлением изображе- 
ния, при различных значениях (0-23) параметра тап$1оп, который задает тип 


преобразования. 


Для этого можно использовать в качестве основы один из рассмотренных выше 
текстов НТМГ-программы. 


При создании динамических сцен может потребоваться изменение ориентации 
рисунка при изменении направления его движения. Например, при изменении 
направления движения самолета на противоположное следует развернуть его изоб- 
ражение на 187. Конечно, можно иметь два рисунка с самолетом, на одном из 
которых самолет летит направо, а надругом — налево. Тогда вам потребуется толь- 
ко динамически изменять аргумент атрибута 5ВС в теге <МО>. Другой способ — 
поместить два рисунка на одном и том же месте, но динамически управлять их 
видимостью так, чтобы в любой момент отображалось только одно изображение. 
Наконец, можно просто применить соответствующий статический фильтр к од- 
ному рисунку. Попробуйте самостоятельно разработать эти сценарии. 
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Таблицы стилей в отдельных файлах 


При использовании тега <ЗГМИЕ> необходимо вставлять таблицу стилей в каждый 
документ. Это может показаться нерациональным как с точки зрения объема фай- 
лов, так и с точки зрения времени, необходимого для разработки страницы. Одна- 
ко существует способ автоматического применения таблицы стилей, сохранен- 
ной в отдельном файле. Имя этого файла должно иметь расширение .езз. Для 
применения стилей, описанных в этом файле, к данному документу использу- 
ется специальная инструкция, которую следует вставить между тегами < МЕ> 
и </ЗТУГЕ>. Вот формат этой инструкции: 

@трой УВЦ“адрес_файла_стилей") 
Например: 

@тром ЧУВЕ(“”НИр://абса/ху2/${у1е.с$$") 
Здесь приведен вымышленный, реально не существующий адрес файла описания 
стилей. 


Другой способ использования внешних таблиц стилей основан на применении 
тега <ИМК> внутри тега <НЕАО>. Например: 

<НЕАО» 

<МК ВЕГ=ЗТУБЕЗНЕЕТ ТУРЕ="сехе/езз" МЕР="адрес_таблицы_стилей" 


ТТТЬЕ="55у1е" 
</НЕАО> 


Вставка Назй-мультфильма в веб-страницу 


НазВ-мультфильм содержится в $Е\/-файле, то есть в файле с расширением 5 
который создается в пакете Масготе а ЕазВ. Чтобы вставить его в веб-страницу 
(в соответствующий ей НТМГ-документ), необходимо написать несколько строк 
НТМГ-кода. А именно нужно вставить объект, который будет проигрывать (по- 
казывать) Назв-файл. Еаз-файл может содержать мультимедийный документ 
(анимацию, векторную и растровую графику, звук, элементы управления, под- 
держивающие интерактивность). В частности, вы можете создать статическое изоб- 
ражение, содержащее много элементов (например, большой чертеж). Для этого 
сохраните его в векторном экономном 5ЭУ!Е-формате и вставьте в свой НТМГ- 
документ. Более того, НазВ-мультфильм может почти полностью определять 
и представлять содержание вашей веб-страницы, оставляя НТМГ-документулишь 
роль контейнера. 


В пакете Масготе а НазВ имеется специальная команда для создания НТМГ- 
документа, содержащего все необходимые теги, обеспечивающие проигрывание 
ЗУ/Е-файла, — РибИзН (Публикация). Однако нередко требуется вставить гото- 
вый мультфильм в уже имеющуюся веб-страницу. В этом случае удобнее скор- 
ректировать НТМГ-документ вручную, с помощью обыкновенного текстового 
редактора. 

Итак, чтобы вставить НазВ-мультфильм в НТМГ-документ, необходимо написать 
в этом документе несколько строк, задающих объект, который будет проигрывать 
(показывать) мультфильм. Это тег <ОВЗЕСТ> с соответствующими параметрами. 
Тег <О ВЗ ЕСГ является контейнером, то есть тегом, который содержит другие теги, 
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задающиепараметры.Главныйпараметртега<ОВУЕСТ> —с1аз;1а.Онуказываетна 
Наз№-проигрыватель (элемент управления АсйуеХ). Параметр со4дебазе указыва- 
ет, где в сети взять ННазв-проигрыватель, если он не установлен на вашем компью- 
тере. Тег <ЕМВЕО> вставлен из-за Месаре-браузера. Другие параметры объекта 
записываются в теге <РАВАМ>. Отметим лишь основные из них, которых в боль- 
шинстве случаев хватает. Параметр <РАКАМ МАМЕ=томе УАЦОЕ="ЯМЯ м с}?ама"> 
указывает на имя $\{-файла с Е!азВ-мультфильмом. Параметры УМОТН и НЕСНГ 
(ширина и высота) определяют размеры прямоугольника, в котором будет разме- 
щаться ваш Е!азВ-мультфильм. Имейте в виду, что мультфильм может быть обре- 
зан, ему также может быть отведено слишком много места на странице. Параметр 
<РАКАМ МАМЕ=\мтоде УАГОЕ=Чапзрагет> определяет, каким будет фон вашего ро- 
лика. В частности, значение {гапзрагеп{ задает прозрачность фона. Это значение 
наиболее часто используется при вставках мультфильмов в веб-страницы. Все 
возможные значения параметров лучше всего изучить по книгам, посвященным 
пакету НазН. Для точного позиционирования Н1аз№-роликанасвоей странице мож- 
но воспользоваться контейнером с заданием координат в атрибуте $МЕ. Напри- 
мер, в Пиегпее Ехр]огег для этого подходит контейнерный тег<МУ>. 


В качестве примера приведем вставку НазВ-мультфильма, представляющего со- 
бой калькулятор. Файл этого мультфильма, сасшаюг.\Ъ, можно взять из коллек- 
ции примеров пакета НИазВ 5.0. НТМГ-код имеет следующий вид: 

<ОМ з1уе=" роз юп : абзо!ще; тор: 120; |е 1: 100" > 

<ОВИЕСТ с!а$149="с1$1а:027СОВбЕ-АЕбО-!!с!-9688-444553540000" 

содеразе="ПЕЕр' / /бомо]1оа@ .пасгомейта. сош/рую/эПоскиауе /саЪз / Е1азй/ 

зиЕ1азВ .сао#уег$101=6,0,0,0" 

МТОТН="430" НЕТСНТ="450" 14="Е]а$61" АБТСМ=" "> 

<РАВАМ МАМЕ=тоУте УАШОЕ = "са1си1абог . зиЁ"> 

<РАВАМ МАМЕ=ана116у УАШИЕ=Ь101> 

<РАВАМ МАМЕ=зса1е УАГОЕ=пофогадег> 

<РАВАМ МАМЕ=мпоае УАШОЕ=гапзрагепе> 

НЫ МАМЕ=Ьасо]1ог УАЦОЕ=#ЕЕЕЕЕЕ> 

="Е1аз51. змЁ " даа116у=109ф зса1е=порогаег мтоде=Егапзрагете 

ры" ЕЕЕЕЕЕЕ МТОТН="430" НЕТСНТ="450" МАМЕ="Е1а$01" АГТСМ="" 

ТУРЕ="арр11саЕ1оп/х-5Поскмауе-ЁЕ1азП" РЬОСТМ5РАСЕ="ВЕЕр: / / 

ул .пасгошей1 а.сош/до/дчееЁЕ1азр1ауег"></ЕМВЕО> 

</ОВЧЕСТ> 


Для изучения всех возможных параметров советуем обратиться к пакету НазВ 
и поэкспериментировать с командой РибИ$В (Публиковать) при различных вари- 
антах параметров. Выбирая различные значения параметров, следите за тем, ка- 
кой НТМГ-код получается при публикации. 


Вставка звука и видео 


Браузеры могут воспроизводить звуковые файлы. Например, Пуегпе Ехрогег 
может загружать и воспроизводить фоновый звук (для его прослушивания не 
нужно щелкать на ссылке). Звук хранится в файле. Пиегпе{ Ехр]огег распознает 
форматы звуковых файлов \АУ АП и МШ.. Для задания фонового звука в Пиегпе 
Ехр]огег используется тег следующего формата: 

<ВОЗОЦКО 8ИС="звуковой_файл" ЮОР=число> 
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Атрибут 1ООР может принимать следующие значения: 
. ТВОЕ — бесконечное повторение, пока страница на экране; 
. РВМЗЕ — воспроизведение звукового файла один раз; 
. число — указание конкретного числа воспроизведений. 
Пример 
<ВС5оумО 5КС="“симфония.\ма\м" ЕО0Р=5> 


В НТМГ-документах можно использовать ссылки на звуковые и видеофайлы, 
которые будут воспроизводиться при активизации ссылок. Кроме того, можно 
использовать специальный тег <ЕМВЕО> для размещения панели проигрывателя 
(плейера) на странице сразу же при ее загрузке в браузер. 


Для различных платформ существуют разнообразные форматы звуковых и ви- 
деофайлов, но в \Мпдо\з общепринятым звуковым форматом является \АМ а в Маст- 
{10з№ — АЕЕ. Для видео общепринят формат МРЕС. Он используется в У/т4о\$, 
Масииозв и Ишмх. Формат ОшсКТипе также широко распространен и может ис- 
пользоваться на платформах УМ ш4о\$ и МасицозВ. Можно выбирать и другие 
форматы, однако следует предупреждать об этом пользователей, а также помнить, 
что звуковые и видеофайлы могут быть очень большого объема, поэтому для их 
загрузки может потребоваться много времени. В связи с этим желательно сооб- 
щать пользователям размеры аудио- и видеофайлов, чтобы они могли решить, 
стоит ли тратить время на их загрузку. 


Особо отметим технологию передачи и воспроизведения звука в режиме реаль- 
ного времени (Кеа1Ап9д1о). В настоящее время она получила широкое распростра- 
нение в Интернете. Эта технология позволяет устраивать аудио- и видеоконфе- 
ренции, осуществлять вещание радиостанций в Интернете. Передача широкопо- 
лосных звуковых сообщений по узкополосным телефонным линиям практически 
в реальном времени основана на применении различных алгоритмов сжатия. В на- 
стоящее время наиболее популярны программы Кеа[Р1ауег С2 и Веа1Р!ауег Раз С2. 
Звуковые файлы, используемые технологией КВеа|1Ац4юо, имеют расширение ВА. 
Кроме того, могут использоваться метафайлы с расширением КАМ. Метафайлы 
являются обычными текстовыми файлами, каждая строка которых содержит пол- 
ный ОВГ-адрес звукового файла с расширением ВА. Первым элементом такого 
адреса (указывающим на тип протокола) является рпр. 


Пример 
рпр: //аи@!о.геа!.с от/ехатрие.га. 
Плейер Кеа!Р1ауег @2 (или Кеа1Р1ауег Раз С2) может воспроизводить не только 
аудио-, но и видеофайлы различных форматов. 
Рассмотрим встраивание звуковых и видеофайлов более подробно. 


Пример ссылки на видеоклип: 
<А НВЕРГ="осеап.а{">Сер({)ННг, видеоклип, 520К</А> 


В тексте этой ссылки мы указали размер видеоклипа — 520К, чтобы пользователь 
оценил время его загрузки в браузер. 


Пиегпе! Ехрогег распознает атрибут ОМС тега <ШМО>, который позволяет встра- 
ивать видео следующим образом. На странице выводится изображение, при наве- 
дении на которое указателя мыши начинается воспроизведение видеоклипа. Вот 
один из основных вариантов формата: 
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<М@ ОУМ5(“С="видео файл" ЗТААТ=МОУЗЕОМЕНВ ЮОР=чиспо_воспроизведений> 


Пример 

<Ма ОУМ$ВС="сПр.а\м!" $ТААТ=МОЧ$ЕОМЕВ 1ООР=З> 
Нижеприведен пример встраивания звукового файлаехатр]е.\ауспомощью тега 
<ЕМВЕО> и ссылки на этот файл. Тег <ЕМВЕО> позволяет сразу разместить панель 
проигрывателя звуковых файлов, а в случае использования ссылки панель про- 
игрывателя появляется на экране только при щелчке на этой ссылке. 

«тм > 

<НЕАО><ТТЕ>ириМер использования `-ВуКа</ИТЬЕ></НЕАО> 

<вору> 

<В>Встраивание звукового файла</В> 

<Р><ЕМВЕО $ВС=“"ехатр/!е.мгам" > 

<Р> 

<Р><ЕМВЕО $ВС=“ехатр/!е.ммам" НЕСНТ=150 ММОТН=180> 

<Р><А НВЕЕР=“"ехатр!е мам“В>СсьтКа на звуковой файл</А> 

</ВОГ\> 

<НТМЕ> 


Поле ввода данных 


При создании интерактивных страниц может потребоваться передать ряд симво- 
лов от пользователя. Например, мы можем попросить пользователя ввести его 
адрес электронной почты. Для этого необходимо поле ввода. Затем все то, что 
было введено, можно обработать с помошью программы-сценария. Чтобы орга- 
низовать поля вводаданных, применяется тег<ПМРОТ>с некоторыми атрибутами 
(рис.П1.28). 


файл Правка Цмд ^бранное м | 
\ » 


Остановить 


Это - поле ввода 


| ы = 1 


Рис. П1.28. Поле ввода 
Для ввода строки символов формат тега <ПМРУОТ> имеет вид: 


<МРОТ ТУРЕ="ТЕХТ"> 

Если вы хотите, чтобы введенные символы появлялись на экране в виде звездо- 

чек (что обычно нужно при вводе пароля), то используйте следующий формат: 
<ПМРОТ ТУРЕ='РАЗЗ\У\МОВГ> 

Для ввода числовых значений используется соответствующий аргумент атрибута ТУРЕ 
<ИМРОТ ТУРЕ="МУМЕНС"> 
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В тег<ПМРУТ> можно вставить и другие атрибуты: 


. МАМЕ="имя" — имя переменной, в которой сохраняется введенное значение; 

. \/АШЕ="значение" — начальное значение; 

. 512Е="число" — длина текстового поля; 

. МАХГЕМОТН='АМспо" — максимальное количество символов, которое можно 
ввести. 

Например: 


<ИМРУТ ТУРЕ="ТЕХТ" МАМЕ="ОЗЕАТЕХТ" \УАБОЕ=“" $12Е="20"> 


Существует и другое средство для предоставления пользователю возможности 
вводить данные — стандартная функция ргошр О языка Лауа$ст!ре, которая при- 
нимает в качестве параметров пояснительный текст и начальное значение, а за- 
тем отображает на экране окно для ввода значения. В этом окне естьдве кнопки — 
ОК и Отмена. Функция возвращает введенное пользователем значение либо #а[е, 
если пользователь нажал кнопку Отмена. 


Например, в результате выполнения функции рготр("Введите текст","") появля- 
ется окно, представленное на рис. П1.29. 
ь Е Е . { 
Запрос пользователю #4 № 1х) 


Запрос -/ама$ сир! би 


;Вве»йги текст 
Отмена 


Рис. ГП1.29. Название рисунка 


Переключатели (гадюБиНоп$) 


Тег <ПМРОИТ> позволяет вывести на страницу не только поле ввода, но и другие 
элементы. Например, если использовать атрибут ТУРЕ="ВАП/Ю", то можно создать 
набор переключателей (гаФобиоп$) — это кружки, щелчок на одном из которых 
делает последний отмеченным, а все остальные — неотмеченными. Чтобы набор 
переключателей воспринимался как целое, его необходимо поместить внутри тега 
списка <Ч> и в каждом теге <ПМРОТ> использовать одно и то же имя (значение 
атрибута МАМЕ). Чтобы выделить переключатель, применяется атрибут СНЕСКЕО. 

После тега <ПМРОТ> помещается текст, который мы хотим видеть рядом с пере- 

ключателем. Атрибут МАШЕ используется для того, чтобы мы смогли узнать, какой 

переключатель выбрал пользователь, и обработать выбор в программе-сценарии. 

В следующем примере создается набор из трех переключателей (рис. П1.30): 
«НТМЬ> 
<НЕАО><Т1Т1Е>Переключатели</Т1Т1Е></НЕАО> 
<Н2>Какой язык вы используете? 


<> 
<МРОТ ТУРЕ= “ВАСЮ“" МАМЕ="ЕАМС" УА1иЕ = "РуссКНм!" СНЕСКЕО> Русский<ВК> 


з 
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<МРОТГ ТУРЕ= "РАО!О" МАМЕ="ТАМС" УАГОЕ="Английский"> Английский <ВВ> 
<ИМРОТ ТУРЕ="ВАБЮ" МАМЕ="ЕАМС" УА1 иЕ = "Немецкий" > Немецкий 

</4Е> 

</Н2> 

</НТМЕ 


| М Переключатели - Мисгозой тегпе! Схеюиы > 
«Вайя Правка Вид Избранное Сервис [правка 


ых: . =7. а аеГ ЛГ 2 


> 


374 ЩИХ. Останови!. Обновить — До*4вй:. 


Какой язык Вы используете ? 


я Русский 
" АНГЛИЙСКИЙ 
с Немецкий 


— | Мойковиеьютер 


Рис. П 1.30. Использование переключателей 


Элементы списка (в рассматриваемом примере — переключатели) располагают- 
ся по умолчанию в столбце, то есть вертикально. А как расположить их горизон- 
тально, то есть в одну строку? Горизонтальное расположение элементов списка 
довольно часто встречается на страницах, поскольку это позволяет экономить ме- 
сто. Один из возможных и часто используемых способов — применение тега таб- 
лицы как метода позиционирования. Ниже приводится вариант соответствующей 
программы и результат ее работы (рис. П1.31). 


$ Переключатели - Мсзок и\ете! Едримех | 
Файп Правка’ Вид Избранное Сервис ' Справка #2 


ГРИ , 


ФИ — 


. 1 ‚ ревмань Обмен». "Домой 


Какой язык Вы используете ? 


*" Русский Г Английский С Немецкий 


Е ] Готово | а] Мой компьютер 


А/131.П1.31, Расположение переключателей в однустроку 


Флажки . 3 5 3 


<НТМЕ> 

<НЕАО><Т1Т1Е>Переключатели</Т1Т1Е></НЕАО> 

Какой язык вы используете? 

<> 

<ТАВЕЕ> 

<ТК> 

<ТБ> 

«МРОТ ТУРЕ= "ВАБЮ"” МАМЕ=“ЬАМС" УАЦОЕ=“РусскКНУ" СНЕСКЕО>Русский 
</тЬ> 

<ТО> 

«МРОТ ТУРЕ=“"ВАС!О" МАМЕ=“АМС"” УА1.иЕ=“Английский"> Английский 
</ТО> 

<то> 

«МРОТ ТУРЕ="ВАГСЛО" МАМЕ=”-АМС" УАГОЕ=“"Немецкий" > Немецкий 
</тЬ> 

</Тв> 

</ТАВЕЕ> 

</от> 

</НТМЕ> 


Флажки 


Флажки отличаются от переключателей тем, что в одном наборе можно устано- 
вить (отметить) более одного флажка (рис. П1.32). Задаются флажки так же, каки 
переключатели, однако аргументом атрибута ТУРЕ должен быть аргумент СНВСКВОХ 


<НТМГЕ> 

“НЕАО’<ТИТЬЕ> Флажки< /Т1Т1.Е></НЕАО? 

<Н2>Какие экзамены вы будете сдавать? 

<иЕ > 

<МРОТ ТУРЕ = "СНЕСКВОХ" МАМЕ= "ТЕЗТ"” УАГОЕ= " Физика” СНЕСКЕО> Русский<ВИ> 
<ИМРУТ ТУРЕ="СНЕСКВОХ"” МАМЕ="ТЕЗТ" УАИ)Е= "Ангпийский язык“"> Английский 
язык<ВК> 

<МРУТ ТУРЕ="СНЕСКВОХ" МАНЕ=“ТЕЗТ"” УАГЧЕ="Математика" > Математика 
</аЕ> 

</Н2> 

</НТМЕ> 


Я _Флажки - Мсгозой Ищете! В 
|| `Файп Правю( Вид Избранное Сервис Справка 
7: ° °ч .“ 7% 


Остановить Обновить Димой 


фе ку о Го не Ш _ 


Какие экзамены Вы будете сдавать ? 
Г? Русский 
г Английский язык 
г Математика 
#1 


2] Готово | 3] Мой компьютер 


Рис. П1.32. Пример использования флажков 
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Если флажки необходимо расположить горизонтально, используйте тег <ГАВГЕ>, 
как в предыдущем примере. 


Кнопки 


Настранице можно разместить кнопки, щелчок клавишей мыши на которых обра- 
батывается программой-сценарием. Например, вы можете создать кнопку с над- 
писью Поиск. Что произойдет, если пользователь нажмет эту кнопку, зависит от 
вашего сценария. Кнопка создается с помощью тега <ВИГОХ. Мы можем поме- 
стить на кнопку текст и изображение, а также позиционировать ее в нужное место 
с помощью атрибута ГЕ (рис. П1.33). 


В следующем примере создается кнопка с изображением из файла юзойр.эН и над- 
писью: 

<НТМЕ> 

<ВОТТОМ ЗТУШЕ="роз1 6101 : арзо100е; и! аЕВ : 150; Ве1 9Ве: 60"> 

<1Мб $8С="10901р.91Ё" МТОТН="50" НЕТбНТ="50"> 


Нажми меня 


</ВОТТОМ> 
</НтмЬ> 
„Е СЛМои докдменгы\Книгэ\БиНо«,Мт Меюю#тщете! Ехркнга Щ\®1Е3 
Файп Правка Вид Избранное Сервис Справка # 
7 » 
Ш, Щи 4 
Вт остановить ОСшоимп, _ домой 
Ри. 


#7} Готов д Мо кльют ор 


Рис. П1.33. Кнопка с изображением и надписью 


Можно создать графическую кнопку, используя уже знакомый тег <П\РОТ>, но 
с атрибутами ТУРЕ=1МАСЕ' и 5КС="имя файла", а также МАМЕ и УАПОЕ: 

«МРОТ ТУРЕ=ТМАСЕ' 51?С="имя файла" МАМЕ='имя кнопки" УА1иЕ=значение> 
В качестве рисунка можно подобрать изображение кнопки или любое другое 
(рис. П1.34). Например, следующая строка кода выводит стрелку из файла знач- 
ка (пиктограммы): 

<МРОТ ТУРЕ="ТМАбЕ &С="агу19пе,1со" МАМЕ="М" УАЦИЕ=значение> 
Кнопку также можно создать с помощью тега: 

<МРОТ ТУРЕ="ВУТТОМ"> 
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сохно ои ПЕТЕТ 

Файл  равка Цид Избранное Сщ*» о 

99 Э ”] 

Назад, Остановить | 

ео = 

Это - графическая кнопка | 

я | 
| 

| = | 

& ] Готово 2} Мея компьютер | 


РИС. П1.34. Пример графической кнопки 


Кроме рассмотренных выше, можно задать специальные кнопки для отправки 
данных серверному приложению (СОТ) и очистки полей ввода (и восстановле- 
ния значений, принятых по умолчанию). В НТМГ-документ можно включить 
несколько элементов типа полей ввода данных, переключателей и флажков. Если 
они входят в один смысловой блок, то эти элементы следует заключить в тег фор- 
мы <ЕЮОВУ>?. В этот же тег можно включить и специальные кнопки. 


Если мы хотим отправлять данные серверному приложению, то тег <КОЕМ> дол- 
жен содержать атрибут, указывающий способ передачи, и атрибут, содержащий 
адрес серверного приложения. 
Пример 
<ЮКМ  МЕТНОО="РОЗТ" АСТШОМ="/т/зегу"> 
Внутри этого тега можно определить кнопку отправки. 
Пример 
<МРУТ ТУРЕ=ЗУВМИ \МАЕОЕ="ОТпраВНТЬ"> 
Здесь аргументом атрибута \АЩЕ является текст надписи на кнопке. 
Кнопка очистки задается так: 
<ТМРОТ ТУРЕ=бОВМТТ ВЕЗЕТ="04НСТНТЬ"> 


Мы не рассматриваем подробно работу с серверными приложениями, поскольку 
это отдельная тема. Однако неплохо знать, что такая возможность имеется. 


Фреймы 


Часто возникает необходимость разместить в окне браузера несколько разделов 
или окон, называемых фреймами. В каждом фрейме отображается свой НТМГ- 
документ. Например, в одном фрейме можно поместить ссылки на документы, 
которые должны показываться в другом фрейме. Иначе говоря, в одной части окна 
имеется оглавление большого документа, а в другой — содержимое документа, 
ссылка на который была использована. Фреймы могут работать независимо, атак- 
же содержать ссылки друг на друга. 
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При использовании фреймов потребуется несколько НТМГ-файлов. Один из них 
называется установочным. В нем описывается расположение (раскладка) фрей- 
мов в окне браузера и назначаются исходные НТМГ-файлы для каждого из фрей- 
мов, но отсутствуют собственно текст и графика. Исходные НТМГ-файлы выво- 
дятся во фреймы и могут содержать тексты, графику, ссылки и пр. 


Установочный НТМТ-файл, как и любой другой, начинается с тега <НТМГ? и за- 
канчивается тегом </НТМГ>. Для разделения окна на несколько фреймов исполь- 
зуются теги <ЕКАМЕЗЕГ> и </ЕВАМЕЗЕТ>. Тег <ЕВАМЕЗЕТ> должен быть размещен 
после тега </НЕАО», но перед тегом <ВОБУ>. 


Два фрейма можно расположить рядом друг с другом или друг над другом. Для 
задания способа расположения используется атрибут СОЗ (если рядом) или КОМ 
(если друг над другом). Чтобы разделить окно на два фрейма, указывают через 
запятые два числа. Эти числа определяют размеры фреймов. Для трех фреймов 
задаются три числа. Если нужно указать, что фрейм занимает все оставшееся место, 
используется символ «звездочка» (*). Размеры фреймов измеряются в пикселах или 
процентах. В последнем случае около числа пишется символ процента (%). 


Например, тег ЕКАМЕЗЕТ СОГ$="50,* "> задает деление окна на два вертикальных 
фрейма, первый из которых имеет ширину 50 пикселов, а второй занимает все 
оставшееся место. 


Тег ЗРВАМЕЗЕТ КО\/$="20%,30%,*"> задает разбиение на три горизонтальных фрей- 
ма высотой 20%, 30% и 50%. 


Можно использовать одновременно и горизонтальное, и вертикальное разбиение 
окна на фреймы. Это делается вложением тегов <ЕКАМЕЗЕТ> друг в друга, то есть 
размещением фреймов внутри фреймов. 


Задав расположение фреймов, следует указать для каждого из них исходный 

НТМГ-файл. Напомним, что исходные файлы выводятся во фреймах. Для этой 

цели служит тег <ЕКАМЕ>, имеющий множество атрибутов, которые управляют 

свойствами фреймов. Ниже перечислены эти атрибуты: 

. ЭКС=ММИЯ 4)аМа" МАМЕ="имя_фрейма" — каждый фрейм должен иметь имя, упо- 
мянутое в атрибуте МАМЕ и к нему должен быть привязан НТМГ-файл, ука- 
занный в атрибуте ЭКС. 


. ЭСКОШИМ№С — определяет, будут ли присутствовать в окне фрейма полосы про- 
крутки; если требуется прокрутка, то задается аргумент УЕ$, иначе — М0. 


‚ МОВЕЗИЕ — запрещает пользователю изменять размеры фреймов; если этот ат- 
рибут не применяется, то пользователь не может изменять размеры. 


. ВОВОЕВ=“\иМрМНа псмосЫ" — определяет ширину разделительной полосы меж- 
ду фреймами в пикселах. 


. ВОКРЕВСОГОВ=“ВеТ_п( осы -* - определяет цвет разделительной полосы; цвет 
задается либо шестнадцатеричным кодом, либо именем. 


. МАКОПМНЕОСНТ="ВосоТа ВерХНею ОТсгупа” — добавляет пустое поле между верхней 
границей фрейма и началом текста или графики; измеряется в пикселах. 


МАКСИ/10ТН="ширина боковых отступов" — добавляет пустое поле между боко- 
выми границами фреймов и началом текста или графики; измеряется в пикселах. 


Поскольку фреймы поддерживаются не всеми браузерами (Пиегпе{ Ехр!огег под- 
держивает), постольку необходимо использовать тег <МОЕКАМЕ> перед тегом тела 
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<ВОБУ>, а в теле программы, то есть между тегами <ВОБУ> и <ВОБ\>, можно вста- 
вить сообщение, которое будет появляться в окне, если браузер не поддерживает 
фреймы. Ниже мы еще рассмотрим применение тега <МОЕВАМЕ>. 


Пусть, например, требуется разделить окно браузера на два вертикальных фрей- 
ма так, чтобы в первом из них появлялось содержимое файла первый.Вии, а во 
втором фрейме — содержимое файла второй.Вит. Назначим фреймам имена соот- 
ветственно "ЛЕВЫЙ" и "ПРАВЫЙ". Разумеется, имена выбираются произвольно. 
Ширину первого фрейма определим в 40%, адля второго выделим все оставшееся 
место окна. В первом фрейме запретим появление полосы прокрутки. Ширину 
разделительной полосы зададим равной 10 пикселам. Тогда установочный НТМГ- 
файл будет содержать следующие теги (листинг П1.б). 


Листинг П1.6. Код установочного файла для создания фреймов 


<НТМЕ> 

<НЕАО><Т1Т1Е>Пример установочного файла</Т1Т1Е><НЕАО> 
< ЕВАМЕ $ЕТСО1$= "40%, *"> 

<ЕВАМЕ $ЗВС=“"“перВЫН.мт" ММЕ="ЛЕВЫЙ" ЗСВОЦШМС=МО ВОВОЕВ=10> 
<ЕАВАМЕ УВС="ВТОрои.Нит" МАМЕ ="ПРАВЫЙ"> 

</ЕВАМЕЗЕТ> 

<МОЕВАМЕ> 

<ВОрУ> 

Для просмотра необходим браузер, поддерживающий фреймы 
</ВОБУ> 

</МОЕВАМЕ> 

</НТМЕ> 

Теперь надо создать два исходных НТМГ-файла. Пусть, например, они будут 
такими: 

<НТМЕ> 

<НЕАБ><ТТЕЕ>перВьт</ИТЕЕ><НЕАО> 

<ворУ> 

<Н2> 

Это левый фрейм, который имеет ширину 4№ 

</Н2> 

</ВОрУ> 


</НТМЬ> 


<НТМЬ> 


<НЕАР><ТТТЬЕ>ВТОро&< /ТТТЬЕ><НЕАР> 


<ВОПУ> 

<Н2> 

Это правый фрейм, который занимает оставшуюся часть окна 
</Н2> 

</ВОрУ> 

</НТМЕ> 


Если загрузить в браузер установочный НТМТГ-файл, то он будет выглядеть, как 
нарис. П1.35. 

Во фреймах можно располагать ссылки, указывающие на фреймы. Щелчок на та- 
ких ссылках может изменить файл, выводимый в другом фрейме. Этот прием ча- 
сто используется при создании так называемых навигационных панелей. Навига- 
ционная панель представляет собой фрейм, расположенный обычно вверху или 
по краю окна. В ней содержатся ссылки, при использовании которых во втором 
фрейме, большем по размеру, выводятся различные документы. Именно для это- 
го и был предусмотрен атрибут МАМЕ в теге <ЕВАМЕ>. 
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Пример установочного файла - Мсгозой имегпе! Схриее 
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Рис. П1.35. Окно браузера разделено на два вертикальных фрейма 


Ссылки на фреймы имеют формат: 
<А НКЕР = "адрес_файла" ТАКСЕТ="имя_фрейма"> текст_ссылки</А> 


для текстовых ссылок или: 
<А НКЕР="адрес_ файла" ТАКСЕТ="имя_фрейма"> <МС $ВС=" графический_файл"> 
</А> 
для графических ссылок. 
Например: 
<А НВЕЕ="“пем.Мт" ТААСЕТ="ПРАВОЕ"> Что нового</А> 
Здесь содержится ссылка на файл пе\. Вт, который следует показывать во фрей- 
ме с именем ПРАВОЕ. При этом на месте ссылки появляется текст Что нового (агее 
с английского переводится как «цель»). 


При разработке многооконных страниц следует внимательно следить затем, что- 
бы ссылки на фреймы использовали только имена фреймов, определенные в уста- 
новочном файле в теге: 

<ЕВАМЕ ЗВС=... МАМЕ-=...> 


Мы рассмотрели способ создания многооконных веб-страниц. Такие страницы 
основаны на фреймах и состоят из установочного НТМГ-файла и исходных 
НТМЕ-файлов. 


Кроме этого, страница может включать текстовые, графические, звуковые и ви- 
деофайлы. В качестве упражнения создайте трехфреймовую страницу, подобную 
рассмотренной выше. Один фрейм будет содержать ваше имя, атакже, возможно, 
фото и адрес, другой фрейм — навигационную панель со ссылками, а третий - 
отображать документы, на которые указывают ссылки. 


Проектирование страницы может идти «сверху вниз» или «снизу вверх». Метод 
«сверху вниз» заключается в создании сначала установочного файла и навигаци- 
онной панели. После отладки этой части программы создаются конечные файлы 
документов, такие как тексты, графика и т. п. Метод «снизу вверх» предполагает 
создание в первую очередь конечных файлов, а затем программы, организующей 
их вывод на экран. Выбор метода зависит от вкуса. 


Тег <ИЕТА> ня 


Тег <МЕТА> 


Дополните свою веб-страницу информацией, которая заключается в тегах<МЕТА»>. 
Эта информация не отображается браузером, однако имеет большое значение. 
В частности, она позволяет задать кодовую страницу языка просмотра докумен- 
та, параметры его кэширования, ключевые слова, по которым вашу страницу бу- 
дут искать поисковые системы, ит. д. 


Метаданные размещаются на странице между тегами <НЕАО> и </НЕАП>. 
Общий формат метатегов в НТМГ-документе: 


<НТМЬ> 

<НЕАО> 

ЗТИТЬЕ 2 <ТЕТЬЕ» 

<! НТТР-эквиваленты > 

<МЕТА НТТР-ЕОПТУ=" ..." СОМТЕМТ=". . ."> 
<! другие теги группы НТТР-ЕООТУ > 


^ 


группа МАМЕ > 
<МЕТА МАМЁ=".,,“”" СОМТЕМТ="..."> 
<! другие теги группы МАМЕ > 


/НЕАО> 
<ВОПУ> 


л 


</ВОрУ> 


«ТМ 


Ниже приводится описание метатегов по группам. 


Группа НТТР-ЕСУМ (НТТР-эквиваленты) 


ЕХРКЕ$ — дата устаревания документа. 


После истечения указанного срока документ будет каждый раз загружаться за- 
ново, а не браться из кэша на вашем локальном диске. Формат даты специфи- 
кации КЕС850. 


Пример 
<МЕТА НТТР-ЕСУ!\="ЕХР!ВЕ$" СОМТЕМТ="Меа, 14 Реб 2001 08:21:53 @МТ"> 
РВАСМА — управление кэшированием. 
Возможно одно значение МОСАСНЕ, то есть данный документ не кэшируется 
браузером. В этом случае запрашиваемая страница будет браться с сервера, а не 
из кэша (буфера) пользовательского компьютера. 
Пример 
<МЕТА НТТР-ЕОУ!М="РВАСМА" СОМТЕМТ="МО-САСНЕ"> 
ООМТЕМГТУРЕ — тип документа и его кодировка. 
Выбор кодовой страницы для правильного отображения символов браузером. 
Пример 
<МЕТА НТТР-ЕОЧПУ="СОМТЕМТ-ТУРЕ" СОМТЕМТ="{ех{/Вт1; спагзеё=\мтаом$-1251"> 
СОМТЕМТ-ГАМСЧАСЕ — указание языка документа. 
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Значение этого параметра может использоваться как поисковыми роботами, так 
и веб-серверами. 

Формат: <Язык>-<Диалект> 

Примеры 


<МЕТА НТТР-ЕОЧМ="СОМТЕМТ-ГАМСУАСЕ" СОМТЕМТ="“еп-СВ"> 
<МЕТА НТТР-ЕСУМ="СОМТЕМТ-ГАМСУАСЕ" СОМТЕМТ="Ги"> 


ВЕНВЕЗН — время (в секундах), через которое произойдет автоматическая пере- 
загрузка документа или переход на другой документ с заданным ОВГ. 


Формат: <время> или <время>; ЗОВ > 
Пример 

<МЕТА НТТР-ЕСУМ="ВЕРВЕЗН" СОМТЕМП="5; Пр: //мимим.птсгозоН.сот"> 
САСНЕООМТВОГ, — управление кэшированием. 


Возможные варианты: кэширование в общем (РУВИС) или частном (РЕМАТЕ) 
кэше. Документ вообще не кэшируется (МО-САСНЕ) или кэшируется, но не со- 
храняется (МО-5ТОКЕ). 


Пример 
<МЕТА НТТР-ЕОПТУ="САСНЕ-СОМТВОГ" СОМТЕМТ="МО-5ТОВЕ"> 


Группа МАМЕ (имя) 


ОЕЗСКРПОМ — описание документа. Один из наиболее важных параметров. 
Информация, содержащаяся в нем, влияет на результаты поиска, осуществля- 
емого поисковыми системами. В общем случае вид результатов поиска, как 
правило, выглядит так: 


. ОВГ документа. 
] Название документа (содержимое <ТИТЕЕ>.. </ПТЕЕ>). 


. Описание документа, то есть РЕЗСИРПОМ, или начальный фрагмент НТМГ- 
документа, если РЕЗСВТРТЮМ отсутствует. В первом случае пользователь 
получает достаточно краткое и информативное описание документа, а во 
втором случае это может быть бессмысленный набор слов или несколько 
первых фраз из вашего документа. 

О Рейтинг (коэффициент соответствия документа запросу пользователя). 

Пример 

<МЕТА МАМЕ="ОЕЗСНРТЮМ" СОИТЕМТ="Описание данного документа, до 100 
символов" > 

КЕМОКОб — ключевые слова. Набор слов и фраз, наиболее полно характеризу- 

ющих данный документ, которые являются основным критерием поиска ва- 

шей страницы поисковыми системами. В конечном счете эти слова учитыва- 
ются при выдаче результатов поиска и способствуют повышению рейтинга 
вашего сайта. 


Пример 


<МЕГА. МАМЕ = "КЕЛЛОВОБ' СОМТЕМТ="лючевье слова, разделенные запятой, до 
1000 символов" > 
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х ПОСОМЕМЕГ$УГАТЕ — статус документа. Данный параметр управляет частотой ин- 
дексации вашей страницы поисковыми серверами и может принимать два зна- 
чения: 

. ЭГАПС (документ статичен, то есть не меняется, и, следовательно, индекси- 
ровать его нужно только один раз). 
Пример 
<МЕТА МАМЕ="РОСОМЕМТ-ЗТАТЕ" СОМТЕМТ="ЗТАТ!С"> 
® П\УМАМС (для часто изменяющихся документов, которые нужно реиндекси- 
ровать). 
Пример 
<МЕТА МАМЕ="РОСОМЕМТ-5ТАТЕ" СОМТЕМТ="БУМАМЮС” 
. КОВОТ$ — управление процессом индексации. 
Возможные варианты: 
О ПМПОЕХ — возможность индексирования данного документа (иначе — МОПМОЕХ); 
® ЮПО\М — возможность индексирования всех документов, на которые есть 
ссылки в данном НТМГ-файле (иначе №ОЮЩОМ; 
. АЦ, — одновременное выполнение условий ПМОЕХ и ЮО 
О №ЪЕ — одновременное выполнение условий МОМПЕХ и №ОЮЦОМ 
Пример 
<МЕТА МАМЕ="ВОВОТ5" СОМТЕМТ='МРЕХ, ’МОЕОМ.0\”> 
. ВЕЗОЧВСЕТУРЕ — тип ресурса. Для обычных НТМГ-документов значение это- 
го параметра устанавливается равным "ООСОМЕТГ". 
Пример 
<МЕТА МАМЕ="ВЕЗОУВСЕ-ТУРЕ" СОМТЕМТ="БОСУМЕМТ"> 
* ОРОАГР — дата обновления страницы. 
Пример 
<МЕТА МАМЕ=“"ИРРАТЕО" СОМТЕМТ="25.11.01"> 
* ОКГ —расположение главной страницы. Базовый Ц В Г определяет, какой доку- 
мент следует индексировать (чтобы не обрабатывать «зеркала»). 
<МЕТА МАМЕ="КЕММОВО$" 1АМС="ги" СОМТЕМТ="те{а, {ад "> 
. АСЛНОК — информация об авторе данного документа, 
1. ООРУКЮНГТ — информация об авторских правах. 
. ОН\ЕКАШОК — программа, создавшая НТМГ-код. 

Допустимо, но не обязательно добавлять в метатеги атрибут 1АХО, указывающий 

язык данных. 

Пример 

<МЕТА МАМЕ="КЕММОВО$" ЕАМС="ги" СОМТЕМТ="те{а, {ад "> 
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Теги НТМЕ 


Здесь приведены наиболее часто употребляемые теги НТМГ, упорядоченные по 
категориям. 


Структура документа 


Тег Описание 


Определяет комментарий, который игнорируется анализатором НТМЕ 
<ООСТУРЕ> — Объявляет тип и формат содержимого документа 
А5Е> Устанавливает УВ!-адрес исходного документа 

во0у> Определяет начало основной части страницы 
<СОММЕМТ> Описывает комментарий, который не отображается 

<ОМ> Осуществляет логическое разделение документа, создавая фрагмент внутри него 
<НЕАО> Заключает в себе теги, содержащие невидимую информацию о документе 

НТМЕ> Идентифицирует документ как содержащий элементы НТМЕ 

ИМК> Служит для обозначения связей между документами 

<МЕТА> Предоставляет различные типы невидимой информации и инструкций для 


браузера 

<МЕХТО> Определяет параметр в теге <НЕАО> для использования текстовыми 
редакторами 

<ЗРАМ> Используется с таблицей стилей для определения нестандартных атрибутов 


текста на странице 


<5ТИ-Е> Заключает-в-еебе-таблину-етилей—= = 


Заголовки и названия 


Тег Описание 


<Н1> Заголовок 1-го уровня 
<Н2> __ Заголовок 2-го уровня 
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Тег Описание | 

<НЗ> Заголовок 3-го уровня 

<Н4> Заголовок 4-го уровня 

<Н5> Заголовок 5-го уровня 

<Нб> Заголовок 6-го уровня 

<ТИЕ> Название документа, показываемое в заголовке окна браузера 


Абзацы и строки 


Тег Описание 
<ВН> Вставляет конец строки 
<СЕМТЕВ> Выравнивает заключенные в него компоненты по центру 
<НА> Помещает на страницу горизонтальную перекладину 
<МОВВ> Запрещает обтекание текстом 
<Р> Обозначает абзац 
<М/ВНА> Вставляет мягкий перенос строки в блок текста в теге <МОВВ> 
Стили 
Тег Описание 
<АБОВЕ$$ > Определяет информацию об адресе, контрольной сумме и авторстве 
<В> Делает начертание текста полужирным, где это возможно 
<ВАЗЕРОМТ> Устанавливает шрифт, используемый по умолчанию 
<В@> Задает размер шрифта на 1 пункт больше текущего 
[ОСКацотЕ> Обозначает отступ в тексте 
<СПЕ> Выделяет текст курсивом; часто используется как знак авторского права 
<СОВЕ> Вставляет код в виде текста с моноширинным шрифтом 
<ОЕМ> Используется для пометки терминов, используемых в первый раз 


Выделяет текст, обычно курсивом 


<РОМТ> Определяет вид, размер и цвет шрифта для текста 

<]> Делает начертание текста курсивным, где это возможно 

<КВО> Используется для отображения на экране текста, который должен ввести 
пользователь 

<И$ПМО> Возвращает текст с моноширинным шрифтом 

<РЕАМТЕХТ> Представляет текст моноширинным шрифтом без обработки тегов 

<РВАЕ> Представляет текст моноширинным шрифтом 

<$> Выводит текст зачеркнутым 

<ЗАМР> Показывает текст как пример программы Л 


- , 
ПрОООЛЖЕН11Е 
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Тег Описание 

<ЭМАН> Определяет, что текст должен быть показан уменьшенным шрифтом 
относительно основного 

<ЭТАКЕ> Выводит текст зачеркнутым 

<ЭТАОМО> Выделяет текст жирным шрифтом 

<ЭМЕ> Заключает в себе таблицу стилей 

<иВ> Выделяет текст, делая его нижним индексом 

<ЗИР> Выделяет текст, делая его верхним индексом 

<> Задает моноширинный шрифт 

<> Делает текст подчеркнутым 

<\МАВ> Задает мелкий шрифт, иногда курсив, фиксированной ширины, 
используемый обычно для обозначения переменных 

<ХМР> Показывает текст моноширинным шрифтом _ _ 

Списки 


Тег Описание 


<00> — Используется внутри списка определений для задания текста в теге <ОТ> 

<> Возвращает текст как список каталога 

<0Е> — Используется для создания списка элементов со связанными описаниями 

<ОТ> = Обозначает определение, описание которого находится в следующем за ним теге <00> 
<И> Обозначает один элемент в нумерованном или маркированном списке <МЕМИ> 

<01> — Преобразует строки текста с тегами <М> в нумерованный список 
<Ч> — Преобразует строки текста с тегами --1>> в маркированный список 


Таблицы 

Теги Описание 

<САРТОМ> Определяет заголовок таблицы 

<С0(> Определяет вид столбцов таблицы по умолчанию 

<СОЕСВОУР> Определяет контейнер для группы столбцов 

<ТАВЦЕ> Определяет раздел тегов <ТВ>, <ТО> и <ТН>, организованных по строкам 
и столбцам‘ 

<ТВОВ\> Определяет раздел, содержащий теги <ТА> и <ТО>, который формирует 
основную часть таблицы 

<ТО> Определяет ячейки таблицы 

<ТЕООТ> Определяет набор строк для использования в нижней части таблицы 


> Определяет строку заглавия таблицы; содержимое выровнено по центру 
и выводится жирным шрифтом 


Теги НТМЬ вы _ 365 


Теги Описание 

<ТНЕАО> Определяет набор строк, используемых как заголовок таблицы 

<ТВ> Определяет строку таблицы 

Ссылки 

Тег Описание 

<А> Определяет гиперссылку; обязательно задавать атрибут НВЕЕ или МАМЕ 
<А НВЕР="ий"> Определяет гиперссылку на элемент другого документа 


<А> МАМЕ="имя"> Определяет гиперссылку на элемент этого же документа, 


Графика, объекты, мультимедиа и сценарий 


Тег Описание 

<АРР1_ЕТ> Помещает апплет уама или другой выполняемый элемент на страницу 

<АВЕА> Определяет форму активного участка изображения-карты клиента 

<ВО$ОУМО> Определяет фоновое звуковое сопровождение страницы 

<ЕМВЕО> Внедряет документы любого типа на страницу для просмотра соответствующим 
приложением 


<1Мб> Используется для вставки графического элемента или видеоклипа на страницу 


<МАР> Задает коллекцию активных участков изображения-карты клиента 
<МАВОЧЕЕ> Создает на странице бегущую строку текста 


<МОЗСЫРТ> Определяет, что будет показывать браузер, не поддерживающий сценарии 


<ОВЗЕСТ> Встраивает на страницу объект или другой элемент управления, не встроенный 
в НТМЕ 
<РАКАМ> Используется в теге <ОВЦЕСТ> для установки свойств объекта 


<ЭСНРТ> Определяет раздел страницы, который должен обрабатываться интерпретатором 
кода сценария 


Формы 


Тег Описание 
<ВУТТОМ> Создает на странице кнопку НТМЕ 


<НЕГОЗЕТ> Рисует прямоугольник вокруг содержащихся в нем элементов для обозначения 
связанных объектов 


<РОКМ> Описывает форму на странице, которая может содержать другие компоненты 
и элементы управления 

<ИМРОТ> Задает параметры элемента управления формы 

<ГАВЕЁ> Определяет текст метки или заголовка для блока элементов управления 


тройолжение = 
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Тег Описание 


<ЕЕСЕМО> Определяет текст, помещаемый в прямоугольник, созданный тегом <НЕШОЗЕТ> 
<ОРТОМ> — Обозначает одну из альтернатив в элементе ЗЕТЕСТ 

<ЗЕЁЕСТ> Определяет поле списка или раскрывающийся список 

<ТЕХТАВЕА> Обозначает поле ввода, состоящее из нескольких строк 


Фреймы 
Тег Описание 
<ЕААМЕ> Определяет конкретный фрейм внутри набора фреймов 


КАМЕЗЕТ> Определяет набор фреймов, который содержит фреймы или подчиненные 
наборы 


ТРКАМЕ> Используется для создания встроенных «плавающих» фреймов на странице 


<МОГКАМЕ$> Определяет, что именно будет показывать браузер, не поддерживающий 
фреймы 


Таблицы стилей 
Единицы измерения 


Есть две основные категории единиц: относительные и абсолютные (плюс про- 
центные). Лучше использовать относительные единицы, поскольку определение 
абсолютных требует знания конкретной системы отображения: на какой прин- 
тер, монитор или другое устройство будет выводиться информация. 


Относительные единицы 


Значения ет, еп и ех соответствуют типографским терминам и определяют соот- 
ношение с размерами других символов; рх обозначает пикселы — элементы экра- 
на, размер которых зависит от установок монитора и видеокарты пользователя. 


В Пиегпе Ехр]огег начиная с версии 4 ет и ех заменены на р, еп — на рх. 


Абсолютные единицы 


Это ш, ст, ши, р, рс: шдаетзначение вдюймах, ст — в сантиметрах, пт — в мил- 
лиметрах, рё — в пунктах (72 пункта надюйм) и рс — в пиках (1 пикаравна 12 пт). 
Эти единицы стоит использовать только в том случае, если вы знаете, каким бу- 
дет размер рабочей области устройства вывода, так как браузеры будут пытаться 
показать все в натуральную величину. 


Проценты 


Эти цифровые значения задаются как числа (с десятичной точкой или без нее), 
показывающие отношение к единице длины (обычно размер шрифта текущего 
элемента). 
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Свойства динамического НТМЁЕ 
Свойства шрифта 


Свойство Топ+ 


Свойство ют 

Значения <ющ-зме>, [/<Ште-педт{>], <юм-атйу> 
Значение по умолчанию Не определено 

Поддерживается Всеми элементами 

Работает ли механизм наследования Да 

Возможна ли процентная запись Только для <ющ-зме>, <чте-печщ> 


Это свойство позволяет устанавливать сразу несколько свойств шрифта в одном 
месте с начальными значениями, определенными для используемых свойств (то 
есть значение, определенное по умолчанию для <Ю1{-$12е>, отличается от значе- 
ния по умолчанию <юЮщ-РМтйу>). Данное свойство может быть использовано с со- 
ответствующими значениями, разделенными пробелами или запятыми, если уста- 
навливается несколько шрифтов. 


Свойство Тот-Рат!у 


Свойство топе-Гаг 

Значение Название семейства шрифта (например, Ана!) 
Значение по умолчанию Устанавливается браузером 

Поддерживается Всеми элементами 

Работает ли механизм наследования Да 

Возможна ли процентная запись Нет 


Вы можете установить несколько возможных значений в порядке предпочтения 
(натот случай, когда в браузере нет нужного шрифта). Для этого просто раздели- 
те их запятыми. Следует закончить родовым названием шрифта (допустимые зна- 
чения зепЁ, запз-зер, сигууе, атщазу или топозрасе). Если имя шрифта состоит из 
нескольких слов, необходимо заключить эти слова в кавычки. 


Свойство Топ{-зте 


Свойство 

Значения <абзоие>, <геа\ме>, <епо{й>, <регсещаде> 
Значение по умолчанию тедит 

Поддерживается Всеми элементами 

Работает ли механизм наследования Да 

Возможна ли процентная запись Да (относительно родительского размера 


шрифта) 
Значения для этого свойства можно задать различными способами: 


. абсолютный размер: допустимые значенияхх-зтай, х-зта!, зтай, тефит, |агде, 
х-!агое, хх-!агде; 


. относительный размер: допустимые значения 1Тагоег, зтаПег; 


. длина в любых единицах измерения (см. выше); 
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. процентное отношение: значения представлены в процентах от родительского 
размера шрифта. 


Свойство Топ{-зтуе 


Свойство топ-5Уе 

Значения погта|!, Цайс, обйаце 
Значение по умолчанию погта! 
Поддерживается Всеми элементами 
Работает ли механизм наследования Да 

Возможна ли процентная запись Нет 


Это свойство используется для определения стиля вашего шрифта. Если суще- 
ствует уже готовый вариант шрифта (например, М№е\м УогК ОБЙаче), то он будет 
применен, в противном случае изменение шрифта будет произведено про- 
граммно. 


Свойство Топ{-ма Па г 


Свойство ТопА/апап{ 
Значения попта!, эта|-сарз 
Значение по умолчанию погта! 
Поддерживается Всеми элементами 
Работает ли механизм наследования Да 

Возможна ли процентная запись Нет 


М№ шокгта! — это стандартный вид, установленный по умолчанию; $та-сарз исполь- 
зует прописные буквы того же размера, что и обычные строчные. 


Свойство Тот-медНЕ 

Свойство топАМечн 

Значения погта!, роа, боег, НаЩег или числовые 
значения от 100 до 900 


Значение по умолчанию погта! 
Поддерживается Всеми элементами 
Работает ли механизм наследования Да 

Возможна ли процентная запись Нет 


Определяет жирность шрифта текста, которая зависит от толщины линии. Если 
используется числовое выражение, то число обязательно должно быть кратным 
100: 400 — то же, что и погта[, 700 — то же, что и Ба. 


Свойства цвета и фона 


Свойство со!ог 


Свойство соог 
Значение Название цвета или его номер 
Значение по умолчанию Зависит от браузера 


Поддерживается Всеми элементами 
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Работает ли механизм наследования Да 
Возможна ли процентная запись Нет 


Устанавливает цвет текста элемента страницы. Цвет может быть задан названием 
(например, эгееп) или номером в соответствии со шкалой КОВ. Это значение мо- 
жет быть задано несколькими способами: в шестнадцатеричной системе, напри- 
мер "ЧЕЕЕЕЕЕ", процентами - "80%,20%,0%"; в десятеричной системе — "245,0,20". 


Свойство раскогоипа 


Свойство Баскогоипа 

Значения {гапзрагет, <цвет>, <11(?1_-адрес>, <гереаЁ>, 
<прокрутка>, <положение> 

Значение по умолчанию 1гапзрагепт{ 

Поддерживается Всеми элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Да (относительно размера самого элемента) 


Определяет параметры фона документа, {гапзрагеп( означает отсутствие фона. Вы 
можете использовать для фона либо цвет, либо изображение с заданным ОЕВГ- 
адресом. Адрес может быть абсолютным или относительным, но его следует обя- 
зательно заключить в скобки и расположить непосредственно за словом и: 
ВОГУ { ЪасКетоипа: ий .(ВИр://гаити.сот/итазе/р1сваге. 11) } 

Можно использовать и цвет фона, и изображение. В таком случае рисунок будет 
расположен поверх цветного фона. Цвет может быть либо чистым, либо смешан- 
ным из двух. Изображение имеет несколько настроек: 


* <гереа(> может иметьзначения гереа{, гереа(-х, гереа(-у и по-гереа; если эти значе- 
ния не указаны, значением по умолчанию является гереа(; 

. <прокрутка> определяет, будет ли изображение оставаться на месте при про- 
кручивании страницы или прокручиваться вместе с ней; возможные значения 
Нхе4, зсго|; 

. <положение> определяет расположение изображения на странице; значения 
могут быть процентными (горизонтальное, вертикальное), абсолютным рас- 
стоянием (горизонтальное, вертикальное) или определенными с помощью клю- 
чевых слов (допустимые значения: юр, пиае, БоНош, 1ей, сешег, п20®. 

В следующих разделах описаны свойства, позволяющие задать свойства фона по 

отдельности. 


Свойство БаскКдгоипа-аНасйтеп+ 


Свойство БаскогоипаАЦасптепт{ 
Значения Яхеа, $сгой 

Значение по умолчанию $СГОЙ 

Поддерживается Всеми элементами 
Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Определяет, будет ли прокручиваться фоновое изображение при прокрутке стра- 
ницы или нет. 
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Свойство Баскагоипа-со!ог 


Свойство Баскаг 9Со[от 
Значения {тапзрагет{, <цвет> 
Значение по умолчанию 1гапзрагет{ 
Поддерживается Всеми элементами 
Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Определяет цвет фона. Может быть один цвет или два смешанных цвета. Цвет 
задается названием (например, этееп) или номером по шкале КСВ. Это значение 
может быть задано несколькими способами: в шестнадцатеричной системе (на- 
пример, "ЧЕНЕЕЕЕ) процентами — "80%,20%,0%"; в десятеричной системе — "255,0". 
Синтаксис для использования двух смешанных цветов такой: 

ВОБУ { БасКетоипа-союг: теа/Бе } 


Свойство БаскКадгоипа-пптаде 


Свойство БасКагоип 1 таде 
Значения <УвВЕ-аЙрес>, попе 
Значение по умолчанию попе 
Поддерживается Всеми элементами 
Работаетли механизм наследования Нет 

Возможна ли процентная запись Нет 


С помощью этого свойства можно определить ОЕВГ-адрес фонового изображения. 
Адрес может быть абсолютным или относительным, но его следует обязательно 
заключить в скобки и расположить непосредственно за словом ий. 


Свойства БасКдгоипа-ро$Нюоп 


Свойства БаскагоипаРо$ оп, БасКагоипаРо$Нопх, 
БаскогоипаРо$Шопу 

Значения <положение>, <длина>, {ор, сещег, роНот, 
ей, пот 

Значение по умолчанию фор, ей 

Поддерживается Всеми элементами 

Работаетли механизм наследования Нет 

Возможна ли процентная запись Нет 


Указывают начальное положение фонового изображения с помощью двух значе- 
ний, определяющих занимаемую часть страницы (по горизонтали, по вертикали), 
и абсолютное расстояние (в соответствующих единицах измерения, сначала по 
горизонтали, потом по вертикали), или используя два ключевых слова из воз- 
можных. 


Свойство БаскКагоипа-гереа+ 


Свойство Баскагоип9Кереа\ 
Значения гереа+ф, гереа{-х, гереа{-у, по-гереа{ 
Значение по умолчанию Вереа{ 


Поддерживается Всеми элементами 
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Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 

Определяет, повторяется ли фоновое изображение для заполнения страницы или 
элемента. Если используются значения гереа{-х, гереа{-у, то изображение повто- 
ряется лишь вдоль одного направления. По умолчанию устанавливается повто- 
рение по обоим направлениям. 


Свойства списков 


Свойство [5-5 е 
Свойство 
Значения 


Значение по умолчанию 
Поддерживается 

Работает ли механизм наследования 
Возможна ли процентная запись 


ОНз$ (уе 
<ключевое слово, <положение>, 
<ИВАЕ-айрес> 


В зависимости от браузера 
Всеми элементами 

Да 

Нет 


Определяет, как должны изображаться элементы списка. Может быть использо- 
вано для установки всех свойств. Их можно также установить по частям, пользу- 


ясь следующими свойствами. 


Свойство 1$1-$Уе-ппаде 
Свойство 

Значения 

Значение по умолчанию 
Поддерживается 

Работает ли механизм наследования 
Возможна ли процентная запись 


ИУ е!таде 
попе, <УВЕ-айрес> 
попе 
Всеми элементами 
Да 

Нет 


Определяет адрес изображения, используемого в качестве маркера или значка для 


каждого элемента списка. 


Свойство 1$1-5тУе-розНюп 
Свойство 

Значения 

Значение по умолчанию 
Поддерживается 

Работает ли механизм наследования 
Возможна ли процентная запись 


ОИ $51 е Розоп 
шзае, ощзае 
ощзае 

Всеми элементами 


Да 
Нет 


Указывает, внутри или вне тела списка должен находиться маркер. 


Свойство 1П${-$1Уе-туре 


Свойство 
Значения 


Значение по умолчанию 


$5 УеТуре 
попе, сие, 4$К, зацаге, Чесита!, 1омег-а!рпа, 
иррег-а!рпа, 1омег-готап, иррег-готап 


915К 
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Поддерживается Всеми элементами 
Работает ли механизм наследования Да 
Возможна ли процентная запись Нет 


Определяет вид маркера списка, используемого перед каждым элементом. 


Свойства текста 
Описания СВОЙСТВ, определяющих различные параметры отображения текста. 


Интервал между буквами: свойство 1евег-зрастя 
Свойство [еНегбраспа 
Значения погта(, <длина> 


Значение по умолчанию 


Поддерживается Всеми элементами 
Работает ли механизм наследования Да 
Возможна ли процентная запись Нет 


Определяет расстояние между буквами. Длина обозначает добавочное расстоя- 
ние между буквами. Оно должно быть выражено с указанием единиц измерения. 


Высота строки: свойство Нпе-вБеюдье 


Свойство тпене1ап\ 

Значения <число>, <длина>, «проценты», попта! 
Значение по умолчанию В зависимости от браузера 
Поддерживается Всеми элементами 

Работает ли механизм наследования Да 

Возможна ли процентная запись Да, по отношению к размеру шрифта 


текущего элемента 


Определяет высоту текущей строки. Числовые значения интерпретируются как 
размер шрифта текущего элемента, умноженный на соответствующий коэффи- 
циент (например, 1,2). Если используется длина, должны указываться единицы 
измерения. Процентное соотношение используется в сравнении с текущим раз- 
мером шрифта и должно быть больше 100%. 


Выравнивание текста: свойство *ех{-айдп 


Свойство {ежАйоп 

Значения ей, парт, сетег, Лизу 
Значение по умолчанию В зависимости от браузера 
Поддерживается Всеми элементами 
Работает ли механизм наследования Да 

Возможна ли процентная запись Нет 


Определяет, как текст будет выровнен относительно содержащего его элемента. 
По существу, делает то же, что и тег <ОУАПСМ .. „>. 


Украшение текста: свойства фех{-аесогаНноп 


Свойства 1ех{Оесогайоп, {1ех{Оесоганоп теТигоиодрп, 
1ех{ЮесогаНопИпаей те, 1ех{ОесогайопОуейте 
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Значения попе, омейте, ипаейте, те-Игоцой 
Значение по умолчанию попе 

Поддерживается Всеми элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Позволяет добиться специального вида текста. Открыто ДЛЯ расширений, нео- 
познанные расширения интерпретируются как подчеркивание. Это свойство не 


наследуется, но обычно распространяется на дочерние элементы, лежащие внут- 
ри родительских. 


Красная строка: свойство фех{-таепт 


Свойство {ех падет 

Значения <длина>, <проценты> 

Значение по умолчанию тего 

Поддерживается Всеми элементами 

Работает ли механизм наследования Да 

Возможна ли процентная запись Да, относительно ширины родительского 
элемента 


Устанавливает величину отступа в единицах измерения или в процентах от ши- 
рины родительского элемента. 


Преобразование текста: свойство фех{-1+гапТогитт 


Свойство {ехПгапТогт 

Значения сарНа!те, иррегсазе, юмегсазе, попе 
Значение по умолчанию попе 

Поддерживается Всеми элементами 

Работает ли механизм наследования Да 

Возможна ли процентная запись Нет 


.  сарЦа|те делает заглавной первую букву каждого слова в текстовом элементе; 
* иррегсазе преобразует все буквы в словах текстового элемента в заглавные; 
.  10\егсазе преобразует все буквы в словах текстового элемента в строчные; 


“ попе снимает все установки, приобретенные в результате наследования. 


Расположение по вертикали: свойство уегЯса!-айдп 


Свойство уе са!Апоп 

Значения Базе!те, зиб, зирег, фор, {ех{-{юр, паае, 
БоНот, 1еж-Боцот, <проценты> 

Значение по умолчанию Базете 

Поддерживается Встроенными элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Да, по отношению к высоте строки 


Определяет расположение текущего текстового элемента по вертикали: 


* Базейпе устанавливает выравнивание по образцу родительского элемента, 
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. пе устанавливает вертикальную среднюю линию текстового элемента на 
основе родительского элемента плюс половина строки последнего; 

. змрег переводит текстовый элемент в верхний регистр; 

. 516 переводит текстовый элемент в нижний регистр; 

. |ех-р выравнивает текстовый элемент по верху текста, набранного шриф- 
том родительского элемента; 

* {ех-БоНот выравнивает текстовый элемент по низу текста, набранного шриф- 
том родительского элемента; 

х {юр выравнивает верх текстового элемента по верху самого высокого элемента 
текущей строки; 

. боИот выравнивает низ текстового элемента по низу самого низкого элемента 
текущей строки. 


Блочные свойства 


Значения этих свойств используются для установки характеристик области во- 
круг элемента. Это может быть применено к символам, изображениям ИТ. Д. 


Свойства Богаег-тор-со!ог, Бог4ег-п9М-соог, Богдег-е -со!ог, 
Богаег-Бойот-соог, Богаег-соог 


Свойства БогаегТорСо!ог, БогаегРа\Соог, 
Богает-ейСобг, рогдегВоНотСо!ог, 
БогаегСоГог 

Значение <цвет> 

Значение по умолчанию <нет цвета> 

Поддерживается Блоками элементов и замещаемыми 
элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Определяют цвет четырех сторон рамок. Если вместо цвета подставить ОВГ-ад- 
рес изображения, он будет повторяться, образуя рамку. 


Свойства Богдег-1ор-51уе, Богдег-пощ-зтУе, Богдег-еН-з1уе, 
Богаег-БоНот-51Уе, Богаег-$1Уе 


Свойства БогаегТорУе, БогаегРам уе, 
Богаетен{Уе, БогаегВоНот$ уе, 
Богаег5\уе 

Значения попе, зона, доче, дгоо\ме, паде, тзе, 
ош5е 

Значение по умолчанию попе 

Поддерживается Блоками элементов и замещаемыми 
элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Определяют стиль четырех сторон рамок. 
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Свойства Богаег-1юр, Богдег-поп\, Богдег-!ей, Бог4ег-Бо{от, Богаег 
(Свойства БогдегГор, БогдегЕ ет, Фогдеей, 
БогдегВоНот, Бог4ег 


Значения <ширина_рамки>, <стиль_рамки>, <цвет> 


Значение по умолчанию тефит, попе, <нет цвета> 


Поддерживается Блоками элементов и замещаемыми 
элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Определяют свойства четырех сторон рамок. Работают так же, как свойства от- 
ступов (см. ниже), за исключением того, что рамка видна: 


.  <ширина рамки> может быть значением тет, {1 или {1сК или задана в еди- 
ницах измерения; 


 <стиль рамки> может иметь значение попе или $014. 


Аргумент со!ог используется для определения цвета заполнения фона элемента, 
пока он загружается, атакже позади прозрачных частей элемента. Если передать вме- 
сто него адрес изображения, то рисунок будет повторяться, заполняя контур рамки. 


Свойства Бог4аег-1юр-мм Й, Богаег-пот-мло, Богдег-ей-млоки, 
Богаег-БоНот-млаИ, Богаег-мло{И 


(Свойства БогдегТор\М аш, Богаегэ а, 
богаее КУА, БогдегВоНот а, 
Богаег ЧЕ 

Значения {пт, тедит, Иск, <длина> 


Значение по умолчанию 
Поддерживается 


Работает ли механизм наследования 
Возможна ли процентная запись 


теЧд!ит 

Блоками элементов и замещаемыми 
элементами 
Нет 


Нет 
тет 


Определяют ширину рамки вокруг элемента. Каждая сторона может быть задана 
соответствующим свойством. Можно также заменить установку четырех индиви- 
дуальных свойств установкой одного свойства Ботдег-\ЛАй так же, как и для свойств 


отступа таг. 


Свойство с!еаг 

(Свойство 

Значения 

Значение по умолчанию 
Поддерживается 

Работает ли механизм наследования 
Возможнали процентная запись 


сеаг 

попе, рой, |еН, пом 
попе 

Всеми элементами 
Нет 

Нет 


Указывает, что следующие элементы должны быть показаны ниже элемента, вы- 
ровненного по левому или правому краю. По умолчанию текст обтекает такие эле- 
менты. 
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Свойство сйр 


Свойство ср 

Значения гес({ор><и9Ш><БоНот><[ей>), ащо 
Значение по умолчанию ащо 

Поддерживается Всеми элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Определяет, какая часть элемента видна. Все, что находится за пределами обла- 
сти, указанной этим свойством, увидеть нельзя. 


Свойство азр!ау 
Свойство ар!ау 
Значения ‚ попе 


Значение по умолчанию © 


Поддерживается Всеми элементами 
Работает ли механизм наследования Нет 
Возможна ли процентная запись Нет 


Это свойство указывает, будет ли показан элемент. 


Свойство Ноа{ 


Свойство зуе Ноа{ 

Значения попе, ей, ид 

Значение по умолчанию попе 

Поддерживается Тегами ОМ, ЭЗРАМ и замененными элементами 
Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Определяет обтекание элемента другими элементами слева или справа вместо 
помещения их под ним. 


Свойства Пед 


Свойства веюмт, рихеНесд, розНед 

Значения ащо, <длина> 

Значение по умолчанию ашо 

Поддерживается Тегами ОМ, ЗРАМ и замененными элементами 
Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Устанавливают высоту элемента и измеряют ее, если это необходимо. Значение 
возвращается в виде строки, включающей единицы измерения (рх, % ит. д.). Для 
получения числового значения используется свойство розНе!е1\. 


Свойства |е# 
Свойства 1ен, рхешен, роз ей 
Значения ащо, <длина>, <проценты> 
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Значение по умолчанию ашо 

Поддерживается Всеми элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Да, относительно ширины родительского 
элемента 


Задают горизонтальную координату элемента, позволяя корректно устанавливать 
и передвигать элементы. Значение возвращается как строка, включающая едини- 
цы измерения (рх, % ит. д.). Для получения значения в виде числа используется 
свойство ро$Гей. 


Свойства тагат-{ор, тагдт-па9т, тагдт-!ей, пагдт-бБо{цот, тагот 
Свойства тагатиТор, тагот1аве, тагатпЕей 
тагдтВоцот, тагдт 


Значения ащо, <длина>, <проценты> 

Значение по умолчанию тего * 

Поддерживается Блоками элементов и замещаемыми 
элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Да, относительно ширины родительского 
элемента 


Определяют размеры отступов вокруг данного элемента. Свойство таг служит для 
задания четырех отступов. Если используется несколько значений, но меньше четы- 
рех, оставшиеся противоположные стороны будут равными. Эти значения устанав- 
ливают минимальное расстояние между текущим элементом и остальными. 


Свойство омегНом 


Свойство омегНо\м 
Значения ащо, ме, адепт, $зсгой 
Значение по умолчанию ащо 


Это свойство управляет тем, что произойдет, если содержимое элемента выйдет 
за его границы: 


. У5е — если содержимое и выйдет за пределы отведенного ему места, он все 
равно будет показан полностью; это значение принято по умолчанию; 


‚ р194еп — выступающие за границы элемента-контейнера части содержимого 
будут обрезаны; 


. ао — добавляет полосы прокрутки, если содержимое выходит за границы эле- 
мента-контейнера; 

. 5сго| — добавляет полосы прокрутки в любом случае. 

Свойства радатд-{ор, радата-пд\, рааатод-1е{, 

раа4та-бойот, ра49ата 


Свойства рааатаТор, рааата[РаН+, радатаген, 
рааатдоВоцот, рада4тд 


Значения ащо, <длина>, <проценты> 
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Значение по умолчанию тего 

Поддерживается Блоками элементов и замещаемыми 
элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Да, относительно ширины родительского 
элемента 


Определяют расстояние между содержимым и рамкой элемента. Свойство рада тя 
используется для задания четырех таких расстояний. Если имеется несколько 
значений, но меньше четырех, оставшиеся противоположные расстояния будут 
равными. 


Свойство ро$Нюоп 


Свойство ро$Нюп 

Значения абзоцме, геаме, уайс 
Значение по умолчанию геануе 
Поддерживается Всеми элементами 
Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Устанавливает, каким образом вычисляется положение элемента в плоскости 
экрана: 


.  абзойие — элемент будет поставлен в некоторое положение относительно фона 
и будет двигаться вместе с ним; 


. Зайс — аналогично относительному (те]айуе), за исключением того, что при 
данном способе позиционирования элемент нельзя сместить с помощью пара- 
метров [ЕЁ и юр; 


.  т@айуе — элемент будет помещен в обычное положение относительно других 
в соответствии с положением в исходном коде (это значение установлено по 
умолчанию). 


Свойства фор 


Свойства тор, рхеТор, ро$Тор 
Значения ащо, <длина>, <проценты> 
Значение по умолчанию ацо 

Поддерживается Всеми элементами 


Работает ли механизм наследования Нет 

Возможна ли процентная запись Да, относительно ширины родительского элемента 
Устанавливают или возвращают вертикальную координату элемента, позволяя 
корректно устанавливать и передвигать элементы. Значение возвращается как 


строка, включающая единицы измерения (рх, % ит. д.). Для получения значения 
в виде числа используется свойство розТор. 


Свойство му 

Свойство му 

Значения ме, падет, тппей 
Значение поумолчанию шрей 
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Поддерживается Всеми элементами 
Работает ли механизм наследования Нет 
Возможна ли процентная запись Нет 


Позволяет элементу быть видимым или невидимым на странице. Невидимые 
(6144еп) элементы занимают то же место и так же влияют на расположение дру- 
гих элементов, каки видимые (\150[е), но становятся прозрачными. Это свойство 
может быть использовано для отображения лишь одного из элементов, занимаю- 
щих одно и то же место: 


. у5е — элемент виден на экране; 
‚ Ш1Адеп — элемент не виден на экране; 


. шШВеги — элемент виден на экране, если его родительский элемент является 


видимым. 
Свойства ма 
Свойства млай, рихемла, роз\Ие{и 
Значения ащо, <длина>, <проценты> 
Значение по умолчанию ашщо за исключением элементов 

с внутренними установками размера 
Поддерживается ОМ, ЭРАМ и замещаемыми элементами 
Работает ли механизм наследования Нет 
Возможна ли процентная запись Да, относительно ширины родительского 


элемента 


Устанавливают ширину элемента и измеряют ее, если это необходимо. Значение 
возвращается как строка, включающая тип единиц измерения (рх, % ит. д.). Для 
получения значения в виде числа используется свойство р о $\\ ай. 


Свойство 7-шаех 


Свойство . дпаех 

Значение <число> 

Значение по умолчанию В зависимости от контекста в исходном тексте 
НТМЕ 

Поддерживается Всеми элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Свойство 7-ша4ех указывает, в каком порядке элементы будут перекрывать друг 
друга. Элементы с более высоким 7-индексом появятся поверх элементов с более 
низким 7-индексом. При положительных значениях элемент ставится перед обыч- 
ным текстом, при отрицательных — позади него. Таким образом, на страницах 
создается набор плоских слоев, для которых задается порядок перекрывания. 


Основные свойства печати 


Свойство раде-Бгеак-аНег 
Свойство радеВгеаКАНег 
Значения <ащо>, <амМауз>, чеН>, <паН{> 
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Значение по умолчанию <ацто> 


Поддерживается Всеми элементами 
Работает ли механизм наследования Нет 
Возможна ли процентная запись Нет 


Управляет началом и концом страницы, разрывом страницы и тем, где на страни- 
це содержание продолжится, то есть слева или справа. 


Свойство раде-бгеак-Бетоге 


Свойство радеВгеаКВетоге 

Значения <ащо>, <амауз>, <еН>, <п9и{> 
Значение по умолчанию <аи{о> 

Поддерживается Всеми элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Управляет началом и концом страницы, разрывом страницы и тем, где на страни- 
це содержание продолжится, то есть слева или справа. 


Свойства фильтров 


Все фильтры вызываются с помощью ключевого слова Я№ег. Есть два вида филь- 
тров: статические и динамические. Динамические фильтры разделены на две груп- 
пы: управляющие переходом (переходные) и управляющие появлением объекта 
на экране. Фильтры первой группы предназначены для того, чтобы объект накла- 
дывался надругие объекты или уходил с соседних объектов. Фильтры второй груп- 
пы заставляют объекты появляться или исчезать одним из 23 возможных спосо- 
бов. Все фильтры вызываются одинаково из каскадной таблицы стилей: 


ЯЦег: имя фильтра (параметр!,. параметр2, и т. д.) 
Существует 14 типов статических фильтров и 2 типа динамических. 


\М5иа!Кег$ 

Свойство объект. Уе.<имя_фильтра>(параметр! и т. д.) 
Значения <имя фильтра>(параметр1, параметр? и т. д.) 
Значение по умолчанию Нет примененного фильтра 

Поддерживается Всеми элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Управляет внешним видом объектов при помощи набора встроенных фильтров. 
Ниже в таблице приведен список доступных фильтров с указанием их функций. 


Фильтр Функция 

арпа Управляет степенью видимости объекта 

Ыиг Создает эффект движения объекта 

спгота Переводит определенный цвет изображения в прозрачный (гапзрагеп) 


Чгорэпадом Отображает силуэт определенного цвета для выбранного объекта, создавая 
иллюзию, что объект находится над страницей, отбрасывая тень 
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Фильтр Функция 


Прп Отражает объект симметрично центральной горизонтальной оси 
Яру Отражает объект симметрично центральной вертикальной оси 


Ч0м Создает для объекта эффект сияния 


дгеу Отображает объект в градациях серого 

пуей Обращает цвета объекта 

Нам Моделирует освещение объекта различными источниками цвета 
тазк Отображает прозрачные (+апзрагеп) символы определенным цветом, 


а непрозрачные делает прозрачными 

гедтес+ Конвертирует объект в РАтаде-объект, то есть в изображение, которым 
может манипулировать Мсгозой ОнесАпитайоп 

зпадо\м Отрисовывает «боковые» грани объекта, создавая впечатление объемности 


маме Выполняет синусоидальное преобразование объекта вдоль вертикальной оси 


хгау Изменяет глубину цвета объекта и отрисовывает черно-белым, делая его 
похожим на рентгеновский снимок 


геуеаТгап$ 


Свойство объект, {Уе. геуеаНгап$(аиганоп = 
<длительность>, {гапзюп=<типперехода>) 

Значения гемеаНгапз (аигаНоп = <длительность>, 
1гапзюоп =<тип перехода>) 

Значение по умолчанию Нет примененного фильтра 

Поддерживается Всеми элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Позволяет открывать или закрывать одни элементы другими, используя 23 встро- 
енных шаблона (см. табл. ниже). 


.  <длительность> — время, за которое превращение с помощью фильтра произой- 
дет полностью (в миллисекундах). 


.  <тип перехода> — целое число, соответствующее номеру применяемого фильтра. 
Тип превращения Номер фильтра 
Вох п (стягивающийся прямоугольник) 0 
Вох ОЩ (расширяющийся прямоугольник) 1 
Сисе шп (стягивающийся круг) 2 
Сие ОШ (расширяющийся круг) 3 
\Мре Ур (стирание вверх) 4 
\Мре Бомт (стирание вниз) 5 
\ММре НОП: (стирание вправо) б 
\ММре 1еН (стирание влево) 7 
\Мегиса! Ваз (вертикальные ж а л ре) з и ) 88 — ироОолжепие 
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Тип превращения Номер фильтра 


нопзоща! Ваз (горизонтальные жалюзи) 9 

Спескегроага Асгоз$ (сужающиеся клетки шахматной доски) 10 
СпескегБоага Вомт (закрывающаяся шахматная доска) 11 
Вапаоп 0155$0№ (случайный наплыв) 12 
Эрй \Мегса! п (вертикальное деление внутрь) 13 
Эри \е са! Ощ (вертикальное деление наружу) 14 
Эр Нопзота!|п (горизонтальное деление внутрь) 15 
Зри Нойзоща! Ош (горизонтальное деление наружу) 16 
Зйр$ 1ей Оомт (стирание влево-вниз) 17 
Эир$з 1ей Ур (стирание влево-вверх) 18 
Эирз Рой Бомп (стирание вправо-вниз) 19 
Эр Ро Ур (стирание вправо-вверх) 20 
Вапаоп Ваг$ Ноизота! (случайные горизонтальные полосы) 21 
Вапаот Ваг$ \Мегиса! (случайные вертикальные полосы) 22 


Вапаот з@есвоп о? (0-22) (случайный выбор из предыдущих вариантов) 23 


БепаТгап$ 

Свойство объект. 1Уе. Мепа{гап$ 

Значения ЫепаТгап$(аиганоп= <длительность>), 
(Чигайоп =<длительность>) 

Значение по умолчанию Нет примененного фильтра 

Поддерживается Всеми элементами 

Работает ли механизм наследования Нет 

Возможна ли процентная запись Нет 


Позволяет управлять появлением и исчезновением выбранных видимых объек- 
тов. Здесь <длительность> — время, за которое действие фильтра произойдет пол- 
ностью (в миллисекундах). 


Свойство сиг$зог 
Свойство Сиг$ОГ 


Значения ащо, сгоззпай, аетаий, папа, томе, е-гезтхе 
пе-гезме, пм-гезше, п-гезше, зе-гезте, 
зм-гезше, з-гозте, м-гпозмео, 1Пж, ман, пер 


Значение по умолчанию ашщо 
Поддерживается Всеми элементами 
Работает ли механизм наследования Нет 
Возможна ли процентная запись Нет 


Определяет вид указателя мыши. 
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События динамического НТМЕ 
Собыие = Описание 

опабон Пользователь прерывает загрузку изображения 
опаНегираме Окончание передачи данных 


опВеюгеипоаа 
опреюгеираже 
опЫиг 


опроипсе 


опспапзе 
опсИсК 


опааж{аауацаЫе 


опааазаспапдеа 


опдаазесотре 
опабЕсИсК 
опагадз{а" 


опеггог 


опеггогираже 


опЯКегспапде 


опЯЦегеуепе 


оп—п!$И 
опюси$ 
оппер 
опкеудомт 
опкеургез$ 
опкеуир 
опоаа 
оптоизедом/п 
оптоизетоуе 
оптоц$еощ 
оптоизеомег 


оптоиц$еир 


опгеаду(ажеспапее 


опгезей 


Происходит перед выгрузкой страницы, что позволяет сохранить данные 
Происходит перед обновлением страницы 


Выход окна из фокуса 


Происходит в элементе <МАНОЦЕЕ>, когда значение свойства ВЕНАМОН — 
АЕТЕАМАТЕ, и содержимое доходит до конца 


Изменение содержимого элемента 
Щелчок на документе 


Происходит периодически, когда данные приходят из асинхронного 
источника 


Происходит при изменении порядка данных, например во время 
фильтрации данных 


Происходит, когда все данные из источника становятся доступными 
Пользователь выполнил двойной щелчок на документе 
Пользователь начинает перетаскивание 

Ошибка во время передачи 


Происходит при отмене изменения данных событием опеогеираме, 
заменяя событие опаНегираме 


Происходит при смене состояния статического фильтра или при 
окончании перехода динамического 


Завершен данный переход фильтра 

Происходит по окончании цикла в элементе <МАВОЦЕЕ> 
Элемент становится активным 

Нажатие пользователем клавиши Е1 или кнопки Нер 
При нажатии клавиши 

Происходит при нажатии клавиши и продолжается при удержании 
Пользователь отпускает клавишу 

Полная загрузка элемента 

Пользователь нажимает на кнопку мыши 

Происходит, когда пользователь двигает мышь 
Указатель мыши выходит из области элемента 
Указатель мыши впервые попадает в область на элемент 
Пользователь отпускает кнопку мыши 

Изменение свойства геадузае 


Очистка формы ь 
продолжение > 
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Событие Описание 

опгезТге Изменение пользователем размеров окна 

опгомметег Происходит при изменении данных в текущей строке 

опгомехи Происходит перед изменением данных в текущей строке источником 
Оп$СГОЦ Прокручивание окна пользователем 

опзаес{ Изменение текущего выделения 


оп5е(ес+ {ак Первый запуск пользователем выделенной части документа 
опа" Прокрутка бегущей строки элемента МАВОЧЕЕ 
опти Отсылка формы на сервер или нажатии кнопки ЗУВМП (Отправка) 


опУп(оад Происходит непосредственно перед выгрузкой страницы 
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1-9 
ЗВ-эффект,, 335 


А 


АсНоп$с1!рЕ,271,275 

Асйуе Зегуег Разез, 277 
АсйуеХ, 248, 267, 273, 278, 348 
Адобе Рио‘озвор, 322 

АТЕЕР, 349 

А$СП-коды, 36, 49, 72, 252, 315 


С 


Сазсадше» Зе ЗПее, 116, 333 
сооК1е-файл, 163, 269,271 
запись данных, 164 
создание/обновление записи, 166 
удаление записи, 166 
чтение данных, 165 
элементы строки, 164 
Стеа{е-методы, 279 


С$$, 244 
СОТ, 85 
Е 


Е|ебу$етОЩесь, 267, 277, 278, 287 
Назб-анимация, 272-273 
вставка в веб-страницу, 347 
создание, 273 
Назв-проигрыватель, 272-273 
НазИ-редактор, 276 


С 


Се{-методы, 279 
СМТ, 85 


Н 


НТМЕГ, 297 
динамический, 116 
простой, ИЗ 
НТМГ-документ, 297 
вставка в таблицу, 263 
вставка звука и видео, 349 
динамические изменения, 154, 156,224 
звуковой файл, 350 
перемещение элементов, 196 
поиск, 242 
разметка, 115 
НТМГ-код, 114, 297 
изменение, 299 
НТМГ-программа, 114, 297, 298, 302 
заголовок, 298 
тело, 298 
НурегТехе МагКкир Гапзиазе, 297 


у 
]Зспрь П8 


Масготе а ПОтеат\еауег, 19, 300 
Масготе а РЙазв, 188, 271, 274, 347 
Мгсгозой Егоп{Разе, 19, 300, 301, 303 
Мегозой Пиегпее Ехрюгег, 16 
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М база данных (продолжение) 
обработка данных, 265 
М бсаре, 16 перемещение по записям, 253 


сортировка, 255 


0 фильтрация, 256 
ОшскТите, 349 бегущая строка, 313 
блокировка сценариев, 277 
В Блокнот \У/т4о%з, 14,15, 18, ИЗ, 248, 291, 
294,299,318 


Кеа!Аиа1ю, 349 
Кеа1РЙауег, 349 
КОВ-составляющая, 307 |=] 


блочные свойства, 374 


5 ввод данных в Лауазсирь 22 
веб-браузер, 16, 299 
объектная модель, 169 
веб-ссылка, 232 
веб-страница, 114 


зспрь 116 
Зпире Табшаг аа, 248 
ЭТО, 248, 249, 250, 252, 255, 259 


з\Ефайл, 276 графика, 316 


и дизайн, 211 
доступ кзащищенным страницам, 167 
Упопи Кезоигсе Госафюг, 322 защита паролем, 267, 271 
ЧЕГ-адрес, 159, 175, 237, 322 защита страниц, 168 
ОТС, 87, 88 стартовая, 296 
возвращениезначения, 32 
\ выражение, 46 


Тауа$ стр, 46 
Улвиа!Вайс$сйрё, 116 задержка выполнения, 162 
элементарное, 46 
М/ вычисление 


МАУ, 349 интеграла, 81 


УЛ п4домз Зсирип» Нозё, 16, 277 О ВОИ 


экстремума выражения, 84 


2 г 
2-штех, 110, 138, 156, 187, 338 тенератор случайных чисел, 205 
гиперссылка, 113,120 
А график 
зависимостей, 221 


абсолютный путь, 323 
анимация, 188 
апплет, 173,365 


Б д 


данные 
база данных, 99, 248,258 отправка, 229 


функции, 220 
графическая карта, 321 


обновление, 255 сортировка, 252, 255 
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дата, определение, 89 

дата и время системные, 85 

декремент, 33 

дескриптор, 114 

дескрипторы комментария, 118 

диалоговое окно, 19 

дизъюнкция, 37 

динамические линии, 223 

динамический НТМГ, 
события, 383 

длина массива, 67 


Е. 


заголовок объемный, 185 
зацикливание, 65, 91 


значение 
Бе, 23, 24, 26, 35 
пи, 67,:2, 98 


(гие, 23, 24, 26, 35 
логическое, 35 


идентификатор, 290 
поля, 248 
специальных папок, 290 

изображение 
вставка, 317 
выравнивание, 317 
горячая область, 321 
загрузка, 158 
замена, 180 
исчезновение, 192 
линейное перемещение, 19% 
обтекание текстом, 317 
поворот, 194, 346 
преобразование, 191 
прозрачность, 189 
разрешение, 178 
создание объекта, 159 
трансформация, 192 
ускорение загрузки, 317 

имя файла, 14 

индекс, 308 

индексация, 310 


инкремент, 33 


интерпретатор /Лауа$сг!рё, 18, 117 


интерпретатор языка, 13 
итерация, 43 
цикла, 42 


К 


кавычки, 28 

использование, 29 
каскадная таблица стилей, 335 
каскадные таблицы стилей, 116 
каталог ссылок, 248 


ключевые слова, 30,31,38,40,44,48, 58, 


108,109, 258 

пе\, 67,96 

{015, 97 

уаг, 52,53 
кнопки, 354 
кодовая страница, 359 
комментарии, 302 
конкатенация, 25, 34 
КОНЪЮНКЦИЯ, 37 


Л 


логические операции, 26 
логические стили, 304 
логическое умножение, 37 


массив, 66 
индексы элементов, 68 
копирование, 69 
многомерный, 67, 68 


обработка числовых данных, 73 


обращение к массиву, 67 
одномерный, 68 
создание, 67, 68 

меню, 234, 236 
выбор опции, 237 
позиционирование, 237 
создание, 237 

метод 
а|егЕ(), 19,128,278 
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метод {продолжение) метод (продолжение) 


БоаО, 63 
ВиПаРаО, 285 
Сеайщегуа!(), 162 
СеагТипеой0, 162 
Созе(), 285, 287 
с105е(), 142 
'(),23, 136 

СоруЕо!аегО, 283 
СтеаеТех ЕПе(), 284, 288 
сиргитеЕуеп О, 138 
РаесЕо4ег(), 283 
оситепе.с[еаг(), 155 
оситепемще(), 155 
Бо.ОнуеЕх!5$(), 279 
Бо.Сепуе0О, 279 
ОеВазеМате(), 285 
еететВуУ1а(), 130 
ОеЕжепзюпМате(), 285 
МоуеРо@ег(), 283 
ореп(), 142 
ОрепА$ Тех еат, 287 
ОрепТех ЕЩЕ, 284, 287 
рготрь, 24 
Кеаа0, 288 
ВеааАПО, 288 
ВеааГлпе(), 288 
Ке»Ое!е{е0), 295, 296 
ВеоВеаа0, 295 
Веэ\\шеО ‚ 295 
Кип(), 292 
$сфрпе(), 288 
зещегуа1(), 161 
зе/Типеощ0, 162 
звом/Мода[1а00, 142 
«РО, 288 
ЗресаЕо!4егзО, 290 
ие, 66 

обработки строк, 57, 58 

форматирования строк, 63 
упдоу.стежеРорирО, 152 
улпдо\.ореп(), 142 
утиеО,63, 101, 104, 155,289 
УиеВ!апкИпе$(), 289 
Уще[те(), 289 


УтиештО, 155 

У\УсирЕ.Есво(), 278 

ввод и вывод данных, 22 
мигающая рамка, 183 
миниатюра, 181 


навигационная панель, 148 


О 


обработка событий, 120, 123 
обработчик событий, 22, 136 
обработчик события, 121, 181 
опсйск, 19 
опосиз, 140 
обратная косая черта, 28 
объект, 56, 112 
Аггау, 56, 66, 67 
методы, 70, 101 
свойства, 69 
Вооеап, 91 
Рае, 56, 85 
методы, 86 
создание, 85 
Чоситепйф, 172 
коллекции, 173 
методы, 173 
свойства, 172 
события, 174 
еуепё, 132, 135, 177 
свойства, 177 
РипсНол, 55, 91 
методы, 93 
свойства, 92 
создание, 91 
Ы$огу, 175 
методы, 176 
1юсайоп, 175 
методы, 175 
свойства, 175 
Ма, 56, 79 
методы, 79 
свойства, 79 
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объект (продолжение) 
памеабог, 176 
методы, 177 
свойства, 176 
Мишфег, 74, 77 
методы, 77 
свойства, 77 
ОБесь, 95 
рорчр, 152 
методы, 152 
свойства, 152 
зсгееп, 178 
свойства, 178 
Эш, 56, 57, 58, 64 
свойства, 58 
Тех{Вапзе, 178,242 
методы, 178 
свойства, 178 
упдо\, 169 
методы, 171 
свойства, 169 
события, 171 
У!зспре.5 Вей, 290, 292 
встроенный, 55, 56, 124 
добавление свойств, 98 
дочерний, 124 
индексация, 126 
обращение к свойствам, 126 
пользовательский, 96 
родительский, 124 
связанный, 99 
создание, 97 
создание базы данных, 99 
ссылка на объект, 99 
объектная модель, 124, 125 
окно 
всплывающее, 151 
модальное, 22, 142 
немодалыюе, 142 
свойства, 141, 142 
создание нового, 141 
фокус, 172 
операнд, 32, 34, 36 
оператор, 32 
&, 103 


оператор (продолжение) 


+=, 102 
:<ДОЗ 
103 
103 

‚103 

1,103 

-,103 

Бгеак, 40,43,44 
сопИпие, 44 

деи, 40 

деве, 104 

4о-\ОШе, 45 

СОТО, 110 

ш, 104 

шуапсеоЕ, 105 

гегиги, 50 

$\Исв, 41 

ПреоЁ, 106 
арифметический, 33,34, 47 
вычитания, 33 
деления по модулю, 33 
комментария, 32 
"комплексный, 105 
логический, 37, 47 
логического отрицания, 32 
объектный, 104 
отрицания, 33, 37 
побитовый, 103 
приоритет, 46, 106, 107 
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присваивания значения переменной, 42 
присвоения, 30, 31, 32, 35, 52, 56, 57, 67, 


95, 202 


склейки или конкатенации, 34 


сложения, 32, 33 
сравнения, 35, 252 
условия, 105 


условного перехода, 38, 43, 47 


1, 38, 42 
$\Исв, 40 
цикла, 42, 247 
Юг, 42, 102 
УП|е, 44 
заголовок, 42 
тело, 42 
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отладка программы, 19 
относительный путь, 323 
оцифровка осей координат, 221 


п 


папка 
ие, перемещение 
и удаление, 283 
расположение, 290 
создание, 282 
пароль, 167, 168, 267, 268, 269 
алгоритм преобразования, 168 
проверка, 271 
перегруженная операция, 25 
передача данных из ЛауаЗст!рё, 272 
переключатели, 351 
переменная, 29, 30 
время жизни, 32 
выбор имен, 30 
глобальная, 31, 52 
имя, 30 
инициализация, 31 
логическая,.31 
локальная, 31, 52 
неопределенная, 31 
область видимости, 32 
область действия, 32 
создание, 30 
строковая, 31 
тип, 31 
числовая, 31 
перемещение 
мышью, 203 
остановка, 198 
по заданной траектории, 196 
по произвольной кривой, 200 
по эллипсу, 198 
печати свойства, 379 
подсветка кнопок, 182 
подстрока, 60 
вставка и замена, 64 
поисковая система, 241, 258 
поисковый образ, ^ Л! 
поле ввода, 24,241,350 
привязкаданных, 253 


полоса разделительная, 312 
преобразование 
строк в числа, 27 
строки, 76 
чисел в строки, 27 
принцип короткой обработки, 38 
программирование 
объектно-ориентированное, 111 
событийное, 112 
публикация, 302 
пустая строка, 24, 26, 39 


Р 


работа с дисками, 279 
разделитель строк, 248 
разрешение, 317 
раскрывающийся список, 234 
регистр, 109 
редактор программ, 20 
реестр, 292 
теё-файлы, 293 
двоичный параметр, 294 
запуск редактора, 293 
параметр ОУУОВО, 294 
программа гсоедИ.ехе, 293 
разделы, 292 
строковый параметр, 294 
Удаление параметра, 295 
удаление раздела, 295 
результаты поиска, 259 
решение квадратного уравнения, 80. 
рисование 
кривых, 217 
линий, 211 
Лиссажу фигуры, 220 
окружности, эллипса, 218 
прямой линии, 212 
точки, 212 
штриховой линии, 214 


С 


свойство 
Бийоп, 133 
шпегНТМГ, 157 


_ Алфавитный указатель 


Алфавитный указатель 


свойство (продолжение) 
шпегТехе, 156 
1еп2 1, 58,176 
ощ{егНТМГ, 157 
ощегТехе, 156 
ргобобуре, 57 
символ 
перевода строки, 114 
служебный, 314 
система поиска, 262 
система счисления 
восьмеричная, 75 
десятеричная, 75 
шестнадцатеричная, 75 
скобки 
квадратные, 42, 72 
круглые, 47, 50, 106 
фигурные, 39, 44, 97 
слой, 187 
служебные символы, 28, 314 
событие, 121, 131 
опсвапее, 121 
опсЦск, 121,133 
оптопзеоуег, 121 
всплывание, 137 
захват, 138 
свойства, 131 
щелчок кнопкой мыши, 22 
создание строкового объекта, 57 
список, 310 
свойства, 371 
создание, 310 
теги, 364 
ссылка, 258, 320 
графическая, 320 
динамическое изменение цвета, 184 
на раздел документа, 323 
на элементы таблицы, 245 
создание, 291 
текстовая, 320 
стиль, 333 
вычеркнутый, 305 
изменение, 156, 334 
каскадный, 335 
курсив, 305 
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стиль (продолжение) 
логический, 304 
мерцающий, 305 
определение, 335 
пишущая машинка, 305 
подчеркнутый, 305 
позиционирование элементов, 337, 
полужирный, 305 
теги, 363 
физический, 305 
сценарий, 32, 116, 117,302 
размещение, 117 
расположение, 119 
счетчик 
времени, 88 
циклов, 66 
считывание значений, 266 


т 


таблица, 244,325 
атрибуты выравнивания, 331 
вставка НТМТГ-документа, 263 
вставка изображения, 251 
выравнивание, 329 
генерация, 247 
добавление/удаление строк, 246 
доступ к элементам, 244 
задание названия, 326 
изменение содержимого ячеек, 246 
объединение ячеек, 327 
рамки, 329 
создание, 101 
теги, 364 
формирование, 248 
таблица стилей, 156, 185,347, 366 
таймер, 91 
тег, 114, 297 
<!>,302 
<АНВЕР», 148 
<ВОРУ>, 120, 298 
<ВК»>, 114,297 
<ВОТТОМ»Ъ, 354 
<САРТ!ОМ», 326 
<СЕМТЕВ>, 302 
<БТУ>, 135,138,302 
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тег (продолжение) текст 
<ЕМВЕО»>, 273, 350 выравнивание, 302 
<ЕОМТЬ, 306 изменение цвета, 182 
<ЕОВМ>, 126,182,229 наложение, 335 
<ЕКАМЕ»>, 114, 144,356 предварительное форматирование, 310 
<ЕКАМЕЗЕТ>, 144, 148, 169 свойства, 372 
<НЕАО», 120 форматирование, 115,303 
<НВ», 312 цвет, 309 
<НТМЕ>, 297 текстовая область, 178 
<1ЕКАМЕ»>, 150, 209 перемещение, 207 
<1МО>, 114,180,317 поиск, 243 
<ПМРОТ>, 350 текстовый редактор, 14, 18, 248, 298 
<МАР>, 321 типы данных, 25 
<МАКОЧЕР»>, 313 МшЬ, 25 
<МЕТА>,301,359 булевский, 26 
<ОВУТЕСТ>, 116,248, 249,347 логический, 25, 26 
<ОРТТОМ», 234 объект, 25 
<Р>, 185,303 строковый,25 
<РВЕ>,310 функция, 25 
<$СЕТРТЬ, 18, 118,278,302 числовой, 25 
<5ЕГЕСТ», 159, 234 тримингстроки, 66 
<$ТУГЕ>, 116, 333 
<ТАВГЕ>, 101, 244, 250, 326 У 


<ТЕХТАКЕА>, 195, 243 
<ТТТЕР>, 298 
<НЕАО», 298 


управления процессами во времени, 161 


абзацы и строки, 363 Ф 
атрибут, 114,297 файл 

ЕУЕМТ, 123 соове.1хь, 163 

РОБ, 123 сзсиреехе, 277 

ТО, 122,126 тез.ае, 292 

. ТАМОСОЧАСЕ, 18 зу$бет.Чаь, 292 

ГО\М/5КС, 158 изег.Чаф, 292 

УКС, 118 узсире.ехе, 277 

УТУГЕ, 16 закрытие, 285 

изменение значений, 155 записьданных, 288 
заголовки и названия, 362 копироваиие, перемещение, 
закрывающий, 297 удаление, 286 
комментария, 119 открытие, 287 
контейнерный, 114,297 прочтение в массив, 289 
одиночный, 297 создание, 284 
открывающий, 297 * установочный, 355, 356 
структура документа, 362 чтение и записьданных, 287 
формат, 114 файловая система, 277 


форматирования текстов, 308 создание объекта, 278 


Алфавитный указатель 


факториал, 43 
физические стили, 305 
фильтр, 189, 252 
а!рва, 189 
Базс!тазе, 194 
Ыпг, 340 
Й1рв,340,341 
геуеаЙгап$, 191 
уауе, 341 
динамический, 191, 340, 343 
каскадных таблиц стилей, 188 
логическое условие, 252 
сброс, 252 
свойства, 380 
статический, 191, 340 
установка, 252 
фильтрация данных, 256 
флаг, 180, 181 
флажки, 353 
фон, 309, 319 
форма, 229 
обработка данных, 229 
отправка данных, 230 
проверка данных, 231 
теги, 365 
формат 
ОТЕ, 188 
ТРЕС, 188 
РМО, 188 
З\Е, 188 
форматирование 
строк, 58, 63 
текста, 325 
фрейм, 140, 144, 355 
запрет использования, 149 
плавающий, 150 
выравнивание, 151. 
неремещение,'208 
проверка загрузки, 149 
теги, 366 
удаление, 146 
функция, 48 
а1ег((), 28 
абитО, 70 
БиПаМепоО, 237 


функция (продолжение) 


свап2с(), 147 
сгеасЕЙеО, 285 
сгеафеЕо!4сгО, 282, 285 
сигусО, 217 
дтуешЮО, 279 
дтуеТобаШ О, 280, 281 
езсареО, 164 

еуа1(), 49, 82, 83, 84, 160, 200 
асюпа, 54 
ЕЦеТоАггауо, 290 
зеСоокеУа!Ю, 165 
сеО, 273 
зеёргорегИез (), 158 
13МаМО, 27 

10ад0, 148 

Тип, 06 

рагзсЕТоа О, 27, 76, 266 
рагзеш{О, 27, 76 
рор0, 153 

ргошр"О, 351 
теадСооК1е(), 165 
иго, 66 

зай$ИсО, 74 

1016(), 75, 76 

102(), 76 

гап$югтО, 191 
{итО, 66 

{урсОГО, 50 
ипезсареб, 49, 165 
утцеСооюеО, 166 
уцехЕ(), 195 

вставка строки, 64 
встроенная, 48 

вызов, 51,55,92,94 
вычисления факториала, 54 
езсарс(), 49 

замена подстрок, 64 
ИМЯ, 50 


определение, 50, 55 

параметры, 50 

поиска, 243 

пользовательская, 48, 50 
рекурсивное определение, 54 
решения математических задач, 80 
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394 


функция (продолжение) 
тело, 50 
удаления пробелов, 65 
функция-конструктор, 97 


Ц 


цвет 

рамки таблицы, 183 

свойства, 368 

фона, 309 

шестнадцатеричное представление, 309 
Цикл 

начальное выражение, 42 

условие, 42 


числа 
представление словами, 225 
с плавающей точкой, 27, 74 
целые, 74 

шрифт 


гарнитура, размер, цвет, 306 


Алфавитный указатель 


шрифт (продолжение) 
моноширинный, 309, 363 
свойства, 367 
управление, 305 


Э 


электронная почта, 230 
маскировка адреса, 233 
элементы управления, 264 
эффект печати на пишущей машинке, 195 
эффекты визуальные, 180, 188, 216, 333 


Я 


язык 
С++, 1 
НТМЕГ, ИЗ 
Тауа, 13 
ОБесЕ Разса!, 111 
С, ИЗ 
структурного программирования, 111 
якорь, 324 
ярлык, 290 
создание, 290, 291 
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КЛУБ П ШХШС СЙ О ЖАЛ 
—> [ 

[5 1 997 году по инициативе генерального директора Издательского дома «Питер» 
Валерия Степанова и при поддержке деловых кругов города в Санкт-Петербурге 
был основан «Книжный клуб Профессионал». Он собрал под флагом клуба про- 
фессионалов своего дела, которых объединяет постоянная тяга к знаниям и любовь 
к книгам. Членами клуба являются лучшие студенты и известные практики из раз- 
ных сфер деятельности, которые хотят стать или уже стали профессионалами втой 
или иной области. 

Как и все развивающиеся проекты, с течением времени книжный клуб вырос 


в «Клуб Профессионал». Идею клуба сегодня формируют три основные «клубные» 
функции: 


. неформальное общение и совместный досуг интересных людей; 

‚ участие в подготовке специалистов высокого класса 
(семинары, пакеты книг по специальной литературе); 

. формирование и высказывание мнений современного профессионала 
(при встречах и на страницах журнала). 


КАК ВСТУПИТЬ В КЛУБ? 
Для вступления в «Клуб Профессионал)» вам необходимо: 


. ознакомиться с правилами вступления в «Клуб Профессионал» 
на страницах журнала или на сайте ммм. рег. сот; 
. выразить свое желание вступить в «Клуб Профессионал» 
по электронной почте ро$ФооКк@рйег.сот или потел. (812) 103-73-74; 
. заказать книги на сумму не менее 500 рублей в течение любого времени 
или приобрести комплект «Библиотека профессионала». 


«БИБЛИОТЕКА ПРОФЕССИОНАЛА» 


Мы предлагаем вам получить все необходимые знания, подписавшись на «Библио- 
теку профессионала». Она для тех, кто экономит не только время, но и деньги. 
Покупая комплект - книжную полку «Библиотека профессионала», вы получаете: 


. скидку 1 5% от розничной цены издания, без учета почтовых расходов; 
. при покупке двух или более комплектов - дополнительную скидку 3%; 
. членство в «Клубе Профессионал»; 

. подарок - журнал «Клуб Профессионал». 


залешиьскии аом 
Закажите бесплатный журнал 7 ГУТ 


«Клуб Профессионал». _ Ммм р ТЕЯ. сом 


Р=/ПИТЕР" 


Нет времени 
ходить по магазинам? 


2 


наберите: 


Здесь вы найдете: 


Все книги издательства сразу 
Новые книги — в момент выхода из типографии 
Информацию о книге — отзывы, рецензии, отрывки 
Старые книги — в библиотеке и на СВ 


И наконец, вы нигде не купите 
наши книги дешевле! 


ЗАКАЗАТЬ КНИГИ ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР» 
МОЖНО ЛЮБЫМ УДОБНЫМ ДЛЯ ВАС СПОСОБОМ: 


. по телефону: (812) 103-73-74; 
по электронному адресу: розФоок@рйег.сот; 
на нашем сервере: млмлм.рКег.сот; 
. по почте: 197198, Санкт-Петербург, а/я 619, 
ЗАО«ПитерПост». 


ВЫ МОЖЕТЕ ВЫБРАТЬ ОДИН ИЗ ДВУХ СПОСОБОВ ДОСТАВКИ 
И ОПЛАТЫ ИЗДАНИЙ: 


(= Наложенным платежом с оплатой заказа при получении посылки на 
ближайшем почтовом отделении. Цены на издания приведены ориентиро- 
вочно и включают в себя стоимость пересылки по почте (но без учета 
авиатарифа). Книги будут высланы нашей службой «Книга-почтой» 
в течение двух недель после получения заказа или выхода книги из печати. 

(= Оплата наличными при курьерской доставке (для жителей Москвы 
и Санкт-Петербурга). Курьер доставит заказ по указанному адресу 
в удобное для вас время в течение трех дней. 


ПРИ ОФОРМЛЕНИИ ЗАКАЗА УКАЖИТЕ: 


. фамилию, имя, отчество, телефон, факс, е-тай; 

‚ почтовый индекс, регион, район, населенный пункт, 
улицу, дом, корпус, квартиру; 

. название книги, автора, код, количество заказываемых 


экземпляров. 
Вы можете заказать бесплатный И, ОЛ 
журнал «Клуб Профессионал» Е 


*}^ УМ РТТРИ '`С0М 


ИЗЛАТЕПЬСКИЙ ПОМ 


РЕ ПИ р . ® СПЕЦИАЛИСТАМ 


МММ М. РИТЕВ КНИЖНОГО БИЗНЕСА! 


ПРЕДСТАВИТЕЛЬСТВА ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР» 
предлагают эксклюзивный ассортимент компьютерной, медицинской, 
психологической, экономической и популярной литературы 


РОССИЯ 
Москва м. «Калужская», ул. Бутлерова, д. 176,офис207,240;тел./факс (095) 777-54-67; 
е-тай: заез@риег.г$К.ги 


Санкт-Петербург м. «Выборгская», Б. Сампсониевский пр., д. 29а; 
тел. (812) 103-73-73, факс (812) 103-73-83; е-тай: заез@риег.сот 


Воронеж ул. 25 января, д. 4; тел. (0732) 39-61 -70; 
е-тай: рйег-мт@\мтай.ги; рйем/@сотсп.ги 


Екатеринбург ул. 8 Марта, д. 2676; тел./факс (343) 225-39-94, 225-40-20; 
е-гпай: рйег-ига@гбб.ги 


Нижний Новгород ул. Премудрова, д. З1а; тел. (8312) 58-50-15, 58-50-25; 
е-тай: риег@июпе{.ппом.ги 


Новосибирск ул. Немировича-Данченко, д. 104, офис 502; 
тел./факс (3832) 54413=09,47-92-93,11-27-18, 11-93-18; е-ппай: рнег-зЮ@изр.ии 
Ростов-на-Дону ул. Калитвинская,д. 17в; тел. (8632) 95-36-31, (8632) 95-36-32; 
е-тай: ирнег@го$ги 
Самара ул. Новосадовая, д. 4; тел. (8462)37-06-07; е-тай: риег-мода@зата.ги 
УКРАИНА 


Харьков ул. Суздальские ряды, д. 12, офис 10-11 ;тел. (057) 751-10-02, (0572) 58-41 -45, 
тел./факс (057) 712-27-05; е-тай: риег@КПагком.рйег.сот 


Киев пр. Красных Казаков, д. 6, корп. 1; тел./факс (044) 490-35-68,490-35-69; 
е-тай: отсе@риег-ргез$.Мем.иа 


БЕЛАРУСЬ 
Минск ул. Бобруйская, д. 21, офис 3; тел./факс (37517) 226-19-53; е-тай: рйег@тай.у 


\ 


Ищем зарубежных партнеров или посредников, имеющих выход на зарубежный рынок. 
Телефон для связи: (812) 103-73-73. 


Е-таН: опдоцап@рцег.сот 


я 


р Издательский дом «Питер» приглашает ксотрудничеству авторов. 


Обращайтесь по телефонам: Санкт-Петербург - (812)327-13-11, 
Москва - (095) 777-54-67. 


\ 


[р Заказ книг для вузов и библиотек: (812) Иа . 
Специальное предложение - е-тай: Ко7т@риег.сот 


пзаАтеаьскпп аом 


РЕПИТЕР` 


57° МАМ. РТ1ТЕНВ.СОМ 


Башкортостан 


Уфа, «Азия», ул. Зенцова, д. 70 (оптовая продажа), 
маг. «Оазис», ул. Чернышевского, д. 88, 


тел./факс (3472) 50-39-00. 
Е-тай: ачама@иапее.ги 


Дальний Восток 


Владивосток, «Приморский торговый дом книги», 


тел./факс (4232) 23-82-12. 
Е-тай: БоокБазе@тай.ритогуе.ги 


Хабаровск, «Мире», 
тел. (4212) 30-54-47, факс 22-73-30. 
Е-тай: зае_Боок@боокти$.КИм.ги 


Хабаровск, «Книжный мир», 
тел. (4212) 32-85-51, факс 32-82-50. 
Е-тай: розтазег@\моПабоок$.КИ{.ги 


Европейские регионы России 
Архангельск, «Дом книги», 

тел. (8182) 65-41-34, факс 65-41-34. 
Е-тай: боок@амееги 


Калининград, «Вестер», 

тел./факс (0112) 21 -56-28,21-62-07. 
Е-гпай: пзиЮкома@уе$ег.ги 

Вр: /Лмлмму мезег.ги 


Северный Кавказ 


Ессентуки, «Россь», ул. Октябрьская, 424, 


тел./факс (87934) 6-93-09. 
Е-тай:  гоззу@Кими.ги 


Сибирь 

Иркутск, «ПродаЛитЪЬ», 

тел. (3952) 59-13-70, факс 51-30-70. 
Е-тай: ргодай@иК.ги 

Вр: /Лммммм. года. иК.ги 


Иркутск, «Антей-книга», 
тел./факс (3952) 33-42-47. 
Е-тай: ащеу@иК.ги 


УВАЖАЕМЫЕ ГОСПОДА! 

КНИГИ ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР» 
ВЫ МОЖЕТЕ ПРИОБРЕСТИ 
ОПТОМ И ВРОЗНИЦУ 
У НАШИХ РЕГИОНАЛЬНЫХ ПАРТНЕРОВ. 


Красноярск, «Книжный мир», 
тел./факс (3912) 27-39-71. 
Е-тай: Боок-моПа@рибс.Кгазпее.ги 


Нижневартовск, «Дом книги», 
тел. (3466) 23-27-14, факс 23-59-50. 
Е-тай: боок@пуацомэК мзпет.ги 


Новосибирск, «Топ-книга», 

тел. (3832) 36-10-26, факс 36-10-27. 
Е-тай: отсе@ор-ктоа.ги 

Ар: /Лмммм Хор-Кттда.ги 


Тюмень, «Друг», 
тел./факс (3452) 21-34-82. 
Е-тай: дгид@\уитеп.ги 


Тюмень, «Фолиант», 
тел. (3452) 27-36-06, факс 27-36-11. 
Е-глай: опап@\уитеп.ги 


Челябинск, ТД «Эврика», ул. Барбюса, д. 61, 
тел./факс (3512)52-49-23. 
Е-тай:еми ка@спе|.зигпе.ги 


Татарстан 

Казань, «Таис», 

тел. (8432) 72-34-55, факс 72-27-82. 
Е-тай: 1аз@Бапсогр.ги 


Урал 

Екатеринбург, магазин № 14, 
ул. Челюскинцев, д. 23, 
тел./факс (3432) 53-24-90. 
Е-лай: дмага@тай.иг.ги 


Екатеринбург, «Валео-книга», 
ул. Ключевская, д. 5, 
тел./факс (3432) 42-56-00. 
Е-пай: мео@е{е!.ги 


АНТИВИРУС 


ИГОР$ ДАНИЛОВА 


ОГ, \УЕВ 


^^ 
ууу. Огуе.ги 
МИ ШИШ ПВИ 


Вадим Дунаев 


(САМОУЧИТЕЛЬ) ауазегре 


Эта книга поможет вам освоить.- 
-е издание 
. общиепринципыпрограммирования; 
* основные элементыязыка Лауазспре; 
* алгоритмы и методы веб-программирования. 


Книга предназначена для самостоятельного освоения программирования на языке Лауазспре. 

Она содержит множество примеров и текстов готовых к использованию программ. 
Рассматриваются вопросы создания сценариев для веб-сайтов, а также сценариев, выполняемых 
УМпадо\мз Эсприпе Ноя. В приложениях приводится справочная информация по Лауазсиреи НТМЕ 
Издание адресовано как новичкам, так и тем, кто уже имеет некоторый опыт в веб-дизайне 

и программировании. 

Изучите один из популярнейшихязыков для веб-программирования самостоятельно! 


ШППТЕР` 5ВМ 5-469-00804-5 


Заказ книг: 
197198, Санкт-Петербург, а/я 619 
тел.: (812)103-73-74, розбоок@рнег.сот 917854691008040 


61093, Харьков-93, а/я 9130 
тел.: (057)712-27-05, рнег@кКпагко\.ркег.сот 


млмлм.рщег.сот - - вся информация о книгах и веб-магазин 


эеФайл взят с сайта 


е Пр: //м/м/м/.па{апач$.ги/ 


э.где есть ещё множество интересных и 
редких книг. 

© 

«Данный файл представлен исключительно 
В 

ознакомительных целях. 

© 

«Уважаемый читатель! 

Если вы скопируете данный файл, 

э»Вы должны незамедлительно удалить его 

» сразу после ознакомления с содержанием. 

эеКопируя и сохраняя его Вы принимаете на 
себя всю 

ответственность, согласно действующему 

эмеждународному законодательству . 

«Все авторские права на данный файл 

«сохраняются за правообладателем. 

еЛюбое коммерческое и иное 
использование 

экроме предварительного ознакомления 
запрещено. 

© 

«Публикация данного документа не 
преследует за 

собой никакой коммерческой выгоды. Но 
такие документы 


«способствуют быстрейшему 
профессиональному и 

«духовному росту читателей и являются 
рекламой 

эбумажных изданий таких документов. 

© 

«Все авторские права сохраняются за 
правообладателем. 

ФЕсли Вы являетесь автором данного 
документа и хотите 

едополнить его или изменить, уточнить 
реквизиты автора 

эили опубликовать другие документы, 
пожалуйста, 

эсвяжитесь с нами по е-тай - мы будем 
рады услышать ваши 


пожелания. 


